.size__guide {
  position: fixed;
  width: 100%;
  top: var(--nova-header-height);
  left: 0;
  bottom: 0;
  background-color: var(--nova-brand-grey-100);
  overflow: auto;
  z-index: var(--nova-z-index-drawer);
  padding: 0;

  @media screen and (min-width: 768px) {
    position: relative;
    top: 0;
    background-color: var(--nova-color-white);
  }

  & .parent-content {
    border: none;
    padding: var(--nova-space-sm) var(--nova-space-2xs);

    @media screen and (min-width: 768px) {
      border: 1px solid var(--nova-color-grey-200);
      padding: var(--nova-space-xs-1) var(--nova-space-xs-3);
    }

    & .content {
      margin-top: var(--nova-space-lg-1);

      @media screen and (min-width: 768px) {
        margin-top: var(--nova-space-md);
        width: 100%;
        overflow: auto;
      }

      & > p {
        padding: 0 var(--nova-space-2xs);
        font: var(--nova-desktop-body-font);
      }

      & p + table {
        margin-top: var(--nova-space-2xs);

        @media screen and (min-width: 768px) {
          margin-top: var(--nova-space-xs-1);
        }
      }

      & table + p {
        margin-top: var(--nova-space-lg-1);

        @media screen and (min-width: 768px) {
          margin-top: var(--nova-space-md);
        }
      }

      & table {
        border-collapse: collapse;
        width: 100%;
        text-align: center;

        & tr {
          height: var(--nova-space-xl-3);

          @media screen and (min-width: 768px) {
            min-width: var(--nova-space-lg);
          }

          & th:first-child {
            width: var(--nova-space-lg);

            @media screen and (min-width: 768px) {
              width: var(--nova-space-sm-3);
            }
          }
        }

        & td {
          min-width: var(--nova-space-lg-1);

          @media screen and (min-width: 768px) {
            min-width: var(--nova-space-md);
          }

          &:hover {
            cursor: pointer;
            background-color: black;
            color: white;
          }
        }

        & th,
        & td {
          font: var(--nova-desktop-body-font);
        }
      }
    }
  }

  & tr:not(:last-child),
  & th {
    border-bottom: 1px solid #ddd;
  }
  
  & td:not(:last-child),
  & th:not(:last-child) {
    border-right: 1px solid #ddd;
  }
  
  & tr th:first-child {
    width: var(--nova-space-2xl);
  
    @media screen and (min-width: 768px) {
      width: var(--nova-space-xl);
    }
  }
  
  & .selected {
    background-color: black;
    color: white;
    border: none;
    padding: var(--nova-space-2xs) var(--nova-space-xs-4);
    cursor: pointer;
  
    @media screen and (min-width: 768px) {
      padding: var(--nova-space-2xs) var(--nova-space-xs-2);
    }
  }
  
  & .highlight-row,
  & .highlight-row td,
  & .highlight-row th,
  & .highlight-col {
    background-color: var(--nova-brand-grey-100);
  }
}

.size__guide__header {
  padding: 0 var(--nova-space-2xs);
  gap: var(--nova-space-2xs);

  & .size__guide__header-title {
    font: var(--nova-desktop-body-font);
    text-transform: capitalize;
  }

  & .button--close-size-guide,
  & .button--close-size-guide svg {
    width: var(--nova-space-sm);
    height: var(--nova-space-sm-1);
    cursor: pointer;

    @media screen and (min-width: 768px) {
      width: var(--nova-space-xs-1);
      height: var(--nova-space-xs-4);
    }
  }

  & .size__guide__header-product-title {
    font-weight: 400;
    letter-spacing: -.2px;

    @media screen and (min-width: 768px) {
      letter-spacing: -.24px;
    }
  }

  @media screen and (min-width: 768px) {
    padding: 0;
    gap: var(--nova-space-sm-2);
  }
}

.button-wrapper--size-guide {
  padding: 0 var(--nova-space-2xs);
  margin-top: var(--nova-space-lg-1);

  @media screen and (min-width: 768px) {
    padding: 0;
    margin-top: var(--nova-space-md);
  }

  & .button--size-guide {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--nova-button-height-s);
    padding: 0 var(--nova-space-md-1);
    background-color: transparent;
    border-color: var(--nova-color-grey-400-1);
    border-radius: 0;
    font: var(--nova-desktop-body-font);
  
    @media screen and (min-width: 768px) {
      height: var(--nova-button-height-xs);
      padding: 0 var(--nova-space-sm-1);
    }
  
    &:hover {
      background-color: var(--nova-brand-grey-100);
      color: var(--nova-brand-ink);
    }
  }
}