challenge-vtex-io-bernardo-waldhelm/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss

.flexRowContent--menu-link,
.flexRowContent--main-header {
  padding: 0 0.5rem;
}

@media screen and (min-width: 40em) {
  .flexRowContent--menu-link,
  .flexRowContent--main-header {
    padding: 0 1rem;
  }
}

@media screen and (min-width: 80rem) {
  .flexRowContent--menu-link,
  .flexRowContent--main-header {
    padding: 0 0.25rem;
  }
}

.flexRowContent--menu-link {
  background-color: #03044e;
  color: #fff;
}

.flexRowContent--main-header {
  background-color: #f0f0f0;
}

.flexRowContent--main-header-mobile {
  align-items: center;
  padding: 0.625rem 0.5rem;
  background-color: #f0f0f0;
}

.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
  color: #ffffff;
  font-size: 14px;
}

.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
  color: #727273;
  font-size: 14px;
}

.flexRow--deals {
  background-color: #0F3E99;
  padding: 14px 0px;
}

.flexRow--deals .stretchChildrenWidth {
  align-items: center;
}

.flexRow--deals .flexCol {
  align-items: center;
  margin-bottom: 5px;
  padding-top: 5px;
}

.flexCol--filterCol {
  max-width: 500px;
  min-width: 230px;
}

.flexCol--productCountCol {
  align-items: flex-start;
}

.flexCol--orderByCol {
  align-items: flex-end;
}

.flexCol--orderByMobileCol {
  width: 42%;
}

.flexCol--filterMobileCol {
  width: 38%;
}

.flexRow--quickviewMainRow {
  display: flex;
  max-height: 100%;
}

.flexColChild--quickviewDetails:first-child {
  overflow-y: auto;
  height: 66% !important;
  overflow-x: hidden;
}

.flexColChild--quickviewDetails:last-child {
  height: 34% !important;
}

.flexRow--addToCartRow {
  padding-bottom: 1rem;
}

.flexRowContent--product__image {
  padding: 0;
  margin: 0;

  @media #{$mq-tablet},  #{$mq-mobile} {
    flex-direction: column;
  }
  .stretchChildrenWidth {

    &:first-child {
      padding-right: 16px;
      margin-right: 16px;
    }

    @media #{$mq-tablet}, #{$mq-mobile}{
      width: 100% !important;
      padding-right: 0;
    }
  }
}

.flexRow--product__name, .flexRowContent--product__name {
  height: 34px;
}

.flexRowContent--product__name .stretchChildrenWidth {
  width: 100% !important;
  height: 34px;
  padding: 0 !important;
  margin: 0 0 8px 0 !important;
}

.flexRow--quantityButton {
  display: flex;
  align-items: center;
  column-gap: 10px;
  height: 49px;

  @media #{$mq-mobile} {
    flex-direction: column !important;
    align-items: flex-start !important;
    row-gap: 10px;
    height: auto;
  }

  .flexRowContent--quantityButton .stretchChildrenWidth{
    &:first-child {
          width: 128px !important;
          padding: 0;
          margin: 0 10px 0 0;
    }
    width: 100% !important;
  }


  .flexRow--buy-button .flexRowContent--buy-button{

    .stretchChildrenWidth {
      width: 100% !important;
      padding: 0;
      margin: 0;
      height: 49px;

      :global(.vtex-button) {
        background: $color-black0;
        border-radius: 0;
        border: none;
      }
      :global(.vtex-add-to-cart-button-0-x-buttonText) {
        font-size: 0;

        &::after {
          content: "ADICIONAR À SACOLA";
          font-family: $font-family;
          font-style: normal;
          font-weight: 400;
          font-size: 18px;
          line-height: 25px;
          color: $color-white;
        }
      }
    }
  }
}

.flexRow--cep {
  margin: 16px 0;
  width: 409px;

  @media #{$mq-mobile} {
    width: 100%;
  }

  .flexRowContent--cep {
    .stretchChildrenWidth {
      padding: 0;
      margin: 0;
    }
  }
}

.flexColChild--info-availability  {
  .flexRow--message-availability {
    width: 57.74%;

    @media #{$mq-tablet}, #{$mq-mobile}{
      width: 100%;
    }

    :global(.vtex-store-components-3-x-title) {
      font-size: 0;
      margin: 0;
      padding: 0;

      &::after {
        content: "Produto indisponível";
        font-family: $font-family;
        font-style: normal;
        font-weight: 700;
        font-size: 14px;
        line-height: 19px;
        color: $color-gray9;

      }
    }

    :global(.vtex-store-components-3-x-subscribeLabel) {
      margin: 0;
      padding: 0;
      font-size: 0;

      &::after {
        content: "Deseja saber quando estiver disponível?";
        font-family: $font-family;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 19px;
        color: $color-gray9;
      }
    }

    :global(.vtex-store-components-3-x-form) {
      margin: 16px 0 0 0;

      :global(.vtex-store-components-3-x-content) {
        width: 100%;
        margin: 0;
        display: grid;
        grid-template-areas:  "A B"
                              "C C";
        max-width: unset !important;
        grid-template-columns: 49% 49%;
        column-gap: 8px;
        row-gap: 16px;

      }

      :global(.vtex-input__error){
        position: absolute;
        margin: 0;
        padding: 0;
      }

      :global(.vtex-input-prefix__group) {
        border-radius: 0;
        border: none;
      }

      :global(.vtex-store-components-3-x-inputName) {
        grid-area: A;
        margin: 0;
        padding: 0;
      }

      :global(.vtex-store-components-3-x-inputEmail) {
        grid-area: B;
        margin: 0;
        padding: 0;
      }

      :global(.vtex-styleguide-9-x-input) {
        height: 40px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 0 0 0 14px;
        font-family: $font-family;
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        color: $color-black;
        border: 1px solid #989898;
        border-radius: 0;

        &::placeholder {
          font-family: $font-family;
          font-style: normal;
          font-weight: 400;
          font-size: 12px;
          line-height: 16px;
          color: #989898;
        }
      }

      :global(.vtex-store-components-3-x-submit) {
        grid-area: C;
        margin: 0;
        padding: 0;
      }

      :global(.vtex-button) {
        width: 100%;
        height: 49px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: $color-black0;
        cursor: pointer;
        font-size: 0;

        :global(.vtex-button__label) {
          padding: 0;

          &::after{
            content: "AVISE-ME";
            font-family: $font-family;
            font-style: normal;
            font-weight: 600;
            font-size: 18px;
            line-height: 25px;
            color: $color-white;
          }
        }
      }

    }

  }
}
.flexRow--newsletter__footer {
  height: 175px;

  :global(.vtex-store-components-3-x-container ){
    padding: 0;
    margin: 0;
  }

  .flexRowContent--newsletter__footer {
    padding: 32px 0 16px 0;
    width: 100%;
    background: $color-black0;
    display: flex;
    align-items: center;
    justify-content: center;

    .stretchChildrenWidth {
      width: 774px !important;
      height: 127px;

      @media #{$mq-tablet}, #{$mq-mobile}{
        width: 100% !important;
        height: auto;
      }

      :global(.vtex-store-components-3-x-label) {
        font-family: $font-family;
        font-style: normal;
        font-weight: 400;
        font-size: 24px;
        line-height: 38px;
        color: $color-white;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 16px;

        &::after {
          content: "Receba ofertas e  novidades por e-mail";
          font-family: $font-family;
          font-style: normal;
          font-weight: 400;
          font-size: 18px;
          line-height: 25px;
          color: $color-gray6;

          @media #{$mq-tablet}, #{$mq-mobile} {
            font-size: 16px;
            line-height: 22px;
          }
        }
      }

      :global(.vtex-store-components-3-x-form) {
        max-width: 774px;
      }

      :global(.vtex-store-components-3-x-inputGroup) {
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
      }

      :global(.vtex-input ) {
        width: 690px;
        height: 32px;

        @media #{$mq-tablet}, #{$mq-mobile}{
          width: calc(100% - 84px);
        }

        :global(.vtex-input-prefix__group) {
          border: none;
          height: 32px;
        }

        :global(.vtex-styleguide-9-x-input){
          background: transparent;
          border: none;
          border-bottom: 1px solid $color-gray6;
          font-family: $font-family;
          font-style: normal;
          font-weight: 400;
          font-size: 18px;
          line-height: 25px;
          color: $color-gray6;
          padding: 0;
          height: 32px;

          @media #{$mq-tablet}, #{$mq-mobile} {
            padding-left: 20px;
            font-size: 12px;
            line-height: 16px;
          }

          &::placeholder {
            font-family: $font-family;
            font-style: normal;
            font-weight: 400;
            font-size: 18px;
            line-height: 25px;
            color: $color-gray6;

            @media #{$mq-tablet}, #{$mq-mobile} {
              padding-left: 20px;
              font-size: 12px;
              line-height: 16px;
            }
          }
        }

      }


      :global(.vtex-store-components-3-x-buttonContainer) {
        padding: 0;
        margin: 0;
        width: 84px;

        :global(.vtex-button) {
          padding: 0;
          border: none;
          background: transparent;
          height: 32px;
          width: 100%;

          :global(.vtex-button__label) {
            background: transparent;
            border: none;
            border-bottom: 3px solid #BFBFBF;
            cursor: pointer;
            font-family: $font-family;
            font-style: normal;
            font-weight: 700;
            font-size: 14px;
            line-height: 19px;
            color: $color-white;
            height: 32px;

          }

        }
      }
    }
  }
}