@import "../../mixins";
@import "../../vars";

.header-main {
  background-color: #F7F7F9;
}

.header-main-container {
  display: flex;
  justify-content: space-between;
  height: 101px;
}

      .header-main-left {
        display: flex;
        align-items: center;

        &__logo {
            margin-right: 40px;

            > img {
                width: 184px;
                max-height: 45px;
                height: 100%;
            }
        }

        &__button {
            @include btn-orange;
            padding: 12px 61px 12px 30px;
            position: relative;
            margin-right: 20px;
            font-size: 14px;

          &:after {
            position: absolute;
            content: "";
            background-image: url("data:image/svg+xml,%3Csvg width='18' height='15' viewBox='0 0 18 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 1.125H16' stroke='white' stroke-width='2.03906' stroke-linecap='round'/%3E%3Cpath d='M2 6.9314H16' stroke='white' stroke-width='2.03906' stroke-linecap='round'/%3E%3Cpath d='M2 13.1251H16' stroke='white' stroke-width='2.03906' stroke-linecap='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: cover;
            width: 16px;
            height: 15px;
            right: 30px;
          }
        }

        .catalog-open {

          &:after {
            background-image: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2L15 14' stroke='white' stroke-width='2.03906' stroke-linecap='round'/%3E%3Cpath d='M2 14.1251L15 1.99998' stroke='white' stroke-width='2.03906' stroke-linecap='round'/%3E%3C/svg%3E");
          }
        }
      }

    .header-main-left-search {
        position: relative;

        &__input {
            width: 205px;
            height: 42px;
            border: 1px solid #ABB2BF;
            border-radius: 10px;
            padding-left: 20px;
            outline: none;
            font-family: "Montserrat";
            font-size: 16px;
            

            @media (min-width: $b1024) {
                    width: 375px;
                    height: 42px;
                }
        }

         &:after {
             position: absolute;
             content: "";
             background-image: url("../img/svg/input-search.svg");
             background-position: right center;
             background-repeat: no-repeat;
             background-size: cover;
             top: 51%;
             right: 15px;
             transform: translateY(-50%);
             width: 26px;
            height: 26px;
        }

                // @media (min-width: $b1024) {
                    
                //     &:after {
                        
                //     }
                // }

        // &__mobile {
        //     width: 38px;
        //     height: 31.5px;
        //     background-color: #DFE1E7;
        //     border-radius: 7.5px;
        //     border: none;
        //     display: inline-block;

        //     @media (min-width: $b1024) {
        //             display: none;
        //         }
        // }

        // &:before {
        //     position: absolute;
        //     content: "";
        //     background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12.4248' cy='7.51028' r='4.38379' transform='rotate(45 12.4248 7.51028)' stroke='%23F5851A' stroke-width='1.5'/%3E%3Cpath d='M8.79395 11.1406L4.387 15.5476' stroke='%23F5851A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
        //     background-repeat: no-repeat;
        //     background-size: cover;
        //     width: 20px;
        //     height: 20px;
        //     margin: 6px 9px;
            
        // }

                // @media (min-width: $b1024) {
        
                //     &:before {
                //         width: 0;
                //         height: 0;
                //     }
                // }
    }
    
      .header-main__right {
        display: flex;
        align-items: center;

        &-socials {
          display: flex;
          flex-direction: column;
          color: $vmainGrey;
          margin-right: 32px;

          .mail {
            font-family: 'Muller';
            font-weight: 500;
            font-size: 15px;
            line-height: 15px;
            margin-bottom: 10px;
          }

          .tel {
            font-family: 'Muller';
            font-weight: 700;
            font-size: 15px;
            line-height: 15px;
          }
        }

        &-button {
            @include btn-orange;
            padding: 12px 30px;
            margin-right: 50px;
            display: none;

          &:hover {
            @include btn-orange-hover;
          }

        @media (min-width: 1220px) {
            display: inline-block;
        }
        }

        &-cart {
          position: relative;

          .svg-cart {
            width: 32px;
            height: 32px;
            position: relative;
          }

          .number {
            position: absolute;
            content: "";
            background-image: url("../img/svg/cart-bg.svg");
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            width: 24px;
            height: 24px;
            padding-left: 8px;
            padding-top: 2px;
            bottom: -2px;
            left: -5px;
            color: #fff;
          }

        }
      }