@import '~/css/helpers';

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

  @-moz-document url-prefix("") {
    background-color: var(--color-black);
  }

  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    svg {
      display: block;
    }
  }

  .list {
    @include respond-to('mobile') {
      display: none;
    }

    display: flex;
    padding: 0;
    list-style-type: none;
    gap: tovw(20px, 'default', 16px);

    .item {
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        text-transform: none;
        line-height: 1;
        letter-spacing: tovw(-0.5px, 'default', -0.5px);
        font-family: var(--font-tt-hoves);
        font-size: tovw(16px, 'default', 14px);
        color: var(--color-white);
      }

      a.active {
        font-weight: 600 !important;
      }

      .no_content {
        margin: 0 tovw(3px, 'default', 1px);
        margin-right: tovw(21px, 'default', 20px);
      }

      .trigger {
        display: flex;
        align-items: center;
        border: none;
        background-color: unset;
        text-transform: none;
        line-height: 1;
        padding: 0 tovw(3px, 'default', 1px);

        &[data-state='open'] {
          .caret {
            transform: rotate(-180deg) translateY(2px);
            transition: transform 250ms;
          }
        }

        .caret {
          background: url('/images/dropdown.svg') no-repeat;
          background-size: contain;
          width: tovw(8px, 'default', 8px);
          height: tovw(6px, 'default', 6px);
          margin-left: tovw(8px, 'default', 8px);
          margin-top: tovw(5px, 'default', 5px);
          filter: brightness(200%);
        }
      }
    }

    li:not(.item--mobile) {
      a {
        letter-spacing: -0.04em;
      }

      position: relative;
    }
  }

  .content {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: tovw(18px, 'default', 14px);
    border: 1px solid var(--color-white);
    border-radius: tovw(8px, 'default', 8px);
    top: tovw(40px, 'default', 30px);
    padding: tovw(23px, 'default', 20px) tovw(24px, 'default', 23px)
      tovw(24px, 'default', 20px) tovw(21px, 'default', 19px);
    background-color: rgb(4 4 4 / 0.8);
    backdrop-filter: blur(20px);
    animation: viewporto 250ms ease-in-out;
    z-index: 20;

    a {
      width: fit-content;
    }
  }

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

  &__mobile {
    position: fixed;
    top: var(--header-height-mobile);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    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%
    );
    padding: tovw(16px, 'mobile');
    width: 100%;
    height: calc(100 * var(--vh) - var(--header-height-mobile));

    .list {
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      .item {
        all: unset;
        flex-direction: column;

        a {
          font-weight: 400 !important;

          &.active {
            font-weight: 600 !important;
          }
        }

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

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

        div:first-child {
          display: flex;
          align-content: center;
        }

        .trigger {
          display: flex;

          &[data-state='open'] {
            .caret {
              transform: rotate(-180deg) translateY(3px);
              transition: transform 250ms;
            }
          }

          .caret {
            margin-top: tovw(10px, 'mobile');
            margin-left: tovw(10px, 'mobile');
            width: tovw(25px, 'mobile');
            height: tovw(14px, 'mobile');
          }
        }
      }

      .content {
        all: unset;
        position: relative;
        display: flex;
        flex-flow: row wrap;
        gap: tovw(10px, 'mobile');
        background-color: unset;
        border: unset;
        padding: unset;
        padding: tovw(15px, 'mobile') 0 tovw(10px, 'mobile') tovw(5px, 'mobile');
        animation: mobile-menu ease-in-out 250ms;

        a {
          font-size: tovw(18px, 'mobile') !important;
        }
      }
    }

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

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

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

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

    svg {
      display: block;
    }

    .themer {
      display: flex;
      color: var(--color-white);
      font-family: var(--font-tt-hoves);
      gap: tovw(10px, 'default', 8px);
      place-content: center;
      place-items: center;
      padding-bottom: tovw(20px, 'mobile', 20px);
      width: 100%;
    }

    .button {
      margin: tovw(55px, 'mobile') 0 tovw(30px, 'mobile') 0;
      width: 100%;
      text-align: center;

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

    p {
      font-size: tovw(15px, 'mobile');
      padding: tovw(6px, 'mobile');
      text-align: center;
    }

    .social {
      display: flex;
      flex-flow: row wrap;
      position: relative;
      place-content: center;
      margin: tovw(16px, 'mobile') auto;
      padding-top: tovw(10px, 'mobile');
      width: 70%;
      gap: tovw(24px, 'mobile');
      grid-template-columns: repeat(6, tovw(24px, 'mobile'));

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

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

      a {
        opacity: 1;
      }
    }
  }
}

[data-theme='light'] {
  .header {
    backdrop-filter: unset;
    background-color: var(--color-black);

    .content {
      background-color: rgb(255 255 255 / 0.8);
    }

    .list > .item {
      .trigger {
        .caret {
          filter: brightness(20%);
        }
      }
    }

    ul li a {
      color: var(--color-white);
    }

    &__mobile {
      p {
        color: var(--color-black);
      }

      .themer {
        color: var(--color-black);
      }

      .content {
        background-color: unset;
      }

      .button {
        @include respond-to('mobile') {
          border: tovw(1px, 'default', 1px) solid var(--color-black);
          color: var(--color-black);
        }
      }
    }
  }

  .social {
    a {
      filter: invert(100%);
    }
  }
}

@keyframes viewporto {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes mobile-menu {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}