challenge-vtex-io-andrea-matsunaga/styles/sass/pages/product/vtex.store-components.scss

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");

.container {
  margin: 0;
  padding: 0;
}

/* ----- PRODUCT-MAIN ----- */
.productImagesGallerySlide {
  width: 100% !important;
  margin: 0;

  .productImageTag {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover !important;
  }
}

.carouselGaleryThumbs {
  margin-top: 16px;
  display: block;

  .productImagesThumb {
    width: 90px !important; // 13.5543% !important (em  1440px);
    height: 100% !important;
    margin-right: 16px;
    margin-bottom: 0;

    &:last-child {
      margin-right: 0;
    }

    .figure {
      width: 100%;
      height: 100%;

      .thumbImg {
        width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 8px;
        object-fit: cover;
      }
    }

    &.productImagesThumbActive {
      .carouselThumbBorder {
        border-radius: 8px;
        background: linear-gradient(
          0deg,
          rgba(0, 0, 0, 0.33),
          rgba(0, 0, 0, 0.33)
        );
      }
    }
  }
}

/* ----- RIGHT-COL ----- */
.productBrand--quickview {
  // font-family: "Open Sans";
  font-weight: 300;
  font-size: 20px;
  line-height: 34px;
  color: #575757;
}

.imageElement--pix-logo {
  width: 66px;
  height: 24px;
  padding-bottom: 5px;
}

.skuSelectorContainer {
  // background-color: red;
  display: flex;
  flex-direction: column;

  .skuSelectorSubcontainer {
    &--tamanho {
      // background-color: yellow;
      order: 1;
      margin-bottom: 10px;

      .skuSelectorName {
        &::after {
          content: "OUTROS TAMANHOS:";
          font-size: 14px;
          line-height: 19px;
        }
      }

      .skuSelectorItem {
        width: 40px;
        height: 40px;

        .skuSelectorInternalBox {
          border: 1px solid #989898;
        }
      }
    }

    &--cor {
      // background-color: cyan;
      order: 2;
      margin-bottom: 16px;

      .skuSelectorName {
        &::after {
          content: "OUTRAS CORES:";
          font-size: 14px;
          line-height: 19px;
        }
      }

      .skuSelectorItem {
        width: 48px;
        height: 48px;

        .skuSelectorInternalBox {
          border: 1px solid #b9b9b9;
        }
      }
    }

    .skuSelectorNameContainer {
      margin: 0;

      .skuSelectorName {
        font-family: "Open Sans";
        font-style: normal;
        font-weight: 400;
        font-size: 0;
        text-transform: uppercase;
        color: #929292;
      }

      .skuSelectorOptionsList {
        margin: 0;
        gap: 16px;

        .skuSelectorItem {
          margin: 0;
          // font-family: "Open Sans";
          // font-weight: 400;
          font-size: 14px;
          line-height: 19px;

          .frameAround {
            border-radius: 50%;
            inset: 0;
          }

          .skuSelectorInternalBox {
            margin: 0;
            // border: 1px solid #989898;
            border-radius: 50%;

            .diagonalCross {
              border-radius: 50%;

              background-image: linear-gradient(
                to bottom right,
                transparent 48%,
                #d5d5d5 50%,
                transparent 52%
              );
            }

            .skuSelectorItemTextValue {
              padding: 10px;
              // font-family: "Open Sans";
              // font-style: normal;
              // font-weight: 400;
              font-size: 14px;
              line-height: 19px;
              color: rgba(185, 185, 185, 0.6);
            }
          }

          &--selected {
            .skuSelectorInternalBox {
              border: 2px solid #000000;

              // .diagonalCross {
              //   background-image: linear-gradient(
              //     to top right,
              //     transparent 44%,
              //     rgba(0, 0, 0, 0.3) 48%,
              //     rgb(0, 0, 0) 48%,
              //     rgb(0, 0, 0) 52%,
              //     transparent 52%
              //   );
              // }
              //   }

              .skuSelectorItemTextValue {
                color: #000000;
              }
            }
          }
        }
      }
    }
  }
}