$header-icons-color: $text-dark !default;
$header-icons-color-hover: $text-muted !default;
$header-icons-size: 20px !default;
$icon-cart-count-line-height: $font-size-base !default;

@import "@css[shared]/components/header/_header-icons";

.header-icon {

   > a {
      color: $header-icons-color;
      padding: 5px 15px;

      .fc {
         font-size: $header-icons-size;
      }

      &[href] {
         @include haf {
            .fc {
               color: $header-icons-color-hover;
            }
         }
      }
   }
}

.header-store {
   color: $header-icons-color;
   display: inline-flex;
   align-items: center;
   font-size: $font-size-larger;

   &::after {
      content: "";
      background: $header-icons-color;
      display: block;
      height: 20px;
      width: 1px;
      margin: 0 25px;
   }

   a {
      @include underline-hover;

      line-height: $line-height-sm;
      text-align: center;
   }
}

.header-burger {
   button {
      @include btn-menu;
   }

   &.open-menu {
      .fc::before {
         content: $icons_close;
         font-size: 18px;
      }
   }
}

.header-switcher a {
   color: $header-icons-color;
   font-size: $font-size-larger;
   margin: 0 !important;
}

.header-icon .fc span {
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 10px;
   height: 16px;
   width: 16px;
   line-height: $icon-cart-count-line-height;
   right: -12px;
   top: -8px;
}

@media screen and (max-width: $xl - 1) and (min-width: $lg) {
   .header-icon > a {
      padding: 5px 10px;

      .fc {
         font-size: $header-resp-font-size;
      }
   }

   .header-store,
   .header-switcher {
      a {
         font-size: $header-resp-font-size;
         line-height: $line-height-sm;
      }
   }

   .header-store::after {
      margin: 0 15px;
   }
}

@media screen and (max-width: $lg - 1) {
   .header-icon {
      > a {
         padding: 5px 25px;
      }
   }

   .header-store {
      display: none;
   }
}

@media screen and (max-width: $xs - 1) {
   .header-icon {
      > a {
         padding: 5px;
      }
   }

   .header-burger {
      button {
         width: 60px;
         height: 40px;

         .fc {
            font-size: 20px;
         }
      }
   }
}
