challenge-vtex-io-saulo-klein/styles/sass/pages/product/vtex.store-components.scss

.container {
  padding: 0;

  .carouselContainer {
    display: flex;
    flex-direction: column-reverse;

    .carouselGaleryThumbs {
      position: static;
      margin: 16px 0 0;
    }

    .carouselThumbBorder {
      height: fit-content;
    }
  }

  .productImagesThumb {
    max-height: 90px !important;
    margin: 0 16px 0 0;
    width: fit-content !important;

    .figure,
    .figure .thumbImg {
      max-height: 90px;
      max-width: 90px;
      min-height: 90px;
      object-fit: fill;
    }
  }

  .productImageTag--main {
    object-fit: fill !important;
    max-width: 664px;
  }

  .productNameContainer {
    text-align: right;
    margin: 0 0 51px;

    .productBrand--quickview {
      font-weight: 300;
      font-size: 20px;
      line-height: 34px;
      color: $color-gray7;
    }
  }

  .skuSelectorContainer {
    display: flex;
    flex-direction: column-reverse;

    .skuSelectorSubcontainer {
      margin: 0;
      margin: 16px 0 10px;
      .skuSelectorTextContainer {
        margin: 0 0 8px 0;

        .skuSelectorName {
          font-size: 0;

          &::before {
            content: "OUTROS TAMANHOS:";
            font-weight: 400;
            font-size: 14px;
            line-height: 19px;
            color: $color-gray6;
          }
        }
      }

      .skuSelectorOptionsList {
        margin: 0;

        .skuSelectorItem {
          margin: 0 16px 0 0;

          .frameAround {
            display: none;
          }
          .skuSelectorInternalBox {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid $color-gray9;
          }

          &--selected .skuSelectorInternalBox {
            border: 2px solid $color-black2;
          }
        }
      }

      .skuSelectorNameContainer {
        margin: 0;
      }

      &:first-child {
        margin: 0 0 16px;

        .skuSelectorTextContainer {
          .skuSelectorName::before {
            content: "OUTRAS CORES:";
          }

          .skuSelectorSelectorImageValue,
          .skuSelectorNameSeparator {
            display: none;
          }
        }

        .skuSelectorOptionsList {
          margin: 0;
        }
      }
    }
  }
}