@use '../abstracts/functions' as fn;
@use '../abstracts/flex' as fx;
@use '../abstracts/gap' as gap;
@use '../base/globals' as gb;
@use '../base/hover' as h;

.header {
  position: absolute;
  top: fn.rem(26px);
  left: 0;
  width: 100%;
  z-index: 155;

  &__leftside {
    width: 100%;
    max-width: fn.rem(1070px);
  }

  &__rightside {}

  &__logo {
    margin-right: auto;

    a {
      display: inline-block;
      width: fn.rem(148px);
      height: auto;

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    &-link {}
  }

  &__menu {
    border-radius: fn.rem(14px);
    border: none;
    outline: none;
    width: fn.rem(39px);
    height: fn.rem(39px);
    background: url('../images/tabler.svg') center center no-repeat rgba(#FFFFFF, 0.12);
    background-size: fn.rem(24px);
    margin-right: fn.rem(20px);
    cursor: pointer;
    transition: background 0.3s ease;

    &:hover {
      background: url('../images/tabler.svg') center center no-repeat rgba(#FFFFFF, 0.16);
      background-size: fn.rem(24px);
    }
  }

  &__contacts {}

  &__messenger {
    a {
      @extend .flex-center;
      width: fn.rem(39px);
      height: fn.rem(39px);
      background: rgba(gb.$color, gb.$color-opacity);
      border-radius: fn.rem(14px);
      @extend .hover-bg;

      img {
        width: fn.rem(23px);
        height: fn.rem(23px);
      }
    }
  }

  &__nav {
    ul {
      @extend .flex-col;
      @extend .gap-2;
      list-style: none;
      padding: 0;
      margin: 0;

      li {
        list-style: none;

        a {
          @extend .flex-center;
          font-family: var(--font2);
          font-size: fn.rem(12px);
          font-weight: 500;
          border-radius: fn.rem(10px);
          padding: fn.rem(7px) fn.rem(14px);
          background: rgba(gb.$color, gb.$color-opacity);
          padding-left: fn.rem(18px);
          @extend .hover-bg;
        }
      }
    }
  }
}