@import '~/css/helpers';

.header {
  position: fixed;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: tovw(14px, 'default', 14px) var(--main-padding-side);
  background: rgb(4 4 4 / 0.01);
  backdrop-filter: blur(20px);

  nav {
    display: flex;
    align-items: center;

    svg {
      display: block;
    }
  }

  ul {
    display: flex;
    margin: 0 0 0 tovw(122px, 'default', 90px);
    padding: 0;
    list-style-type: none;
    gap: tovw(32px, 'default', 16px);
  }

  li:not(.item--mobile) {
    position: relative;

    &::after {
      position: absolute;
      top: 50%;
      left: tovw(-16px, 'default', -16px);
      width: tovw(7px, 'default', 7px);
      height: tovw(7px, 'default', 7px);
      content: '';
      transition: opacity var(--normal-transition);
      transform: translateY(-50%);
      opacity: 0;
      background: var(--color-white);
    }
  }

  li.active {
    &::after {
      opacity: 1;
    }
  }

  .burger {
    width: tovw(28px, 'default', 28px);
  }

  &__mobile {
    position: fixed;
    z-index: 10;
    top: tovw(75px, 'mobile');
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100 * var(--vh) - tovw(75px, 'mobile'));
    padding: tovw(16px, 'mobile');
    background-color: var(--color-black);
    background-image: linear-gradient(
      180deg,
      rgb(0 0 244 / 0) 1.63%,
      rgb(0 0 244 / 0.9) 81.47%
    );

    ul {
      flex-direction: column;
      margin: 0;
      padding: 0;
    }

    a {
      font-size: tovw(50px, 'mobile');
      letter-spacing: tovw(-1px, 'mobile');
      opacity: 0.6;

      @media screen and (max-height: 750px) {
        font-size: calc(var(--vh) * 5.2);
      }
    }

    li.active {
      a {
        opacity: 1;
      }
    }

    svg {
      display: block;
    }

    button {
      width: 100%;
      margin: tovw(59px, 'mobile') 0 tovw(44px, 'mobile') 0;

      @media screen and (max-height: 750px) {
        margin: calc(var(--vh) * 7.2) 0 calc(var(--vh) * 5.2) 0;
      }
    }

    p {
      text-align: center;
    }

    .social {
      position: relative;
      display: grid;
      justify-content: center;
      width: 100%;
      margin: tovw(32px, 'mobile') 0;
      padding-top: tovw(32px, 'mobile');
      grid-template-columns: repeat(6, tovw(24px, 'mobile'));
      gap: tovw(24px, 'mobile');

      &::after {
        position: absolute;
        top: tovw(-32px, 'mobile');
        left: tovw(-16px, 'mobile');
        width: calc(100% + tovw(32px, 'mobile'));
        height: tovw(1px, 'mobile', 1px);
        margin: tovw(24px, 'mobile') 0;
        content: '';
        background: white;
      }

      li,
      a {
        display: block;
        width: tovw(24px, 'default', 24px);
        height: tovw(24px, 'default', 24px);
      }

      a {
        opacity: 1;
      }
    }
  }
}