@use 'sass:math';

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

$animationCurve: cubic-bezier(0.86, 0, 0.07, 1);

nav {
  user-select: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: height 0.4s $animationCurve;

  [data-nav-blur-gradient='false'] & {
    background-color: var(--color-background-secondary-translucent);
    backdrop-filter: var(--filter-blur);
  }
  .inner {
    max-width: 980px;
    margin: auto;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;

    a {
      text-decoration: none;
      color: var(--color-text-secondary);
    }

    .title {
      @include flex-center;

      height: 48px;
      margin: 0;
      font-size: 20px;
      font-weight: 500;
      color: var(--color-text-primary);
    }

    .nav-arrow {
      display: none;
    }

    .nav-items {
      display: flex;

      .nav-item {
        @include flex-center;

        font-size: 16px;
        padding: 0 16px;
        transition: color 0.35s;

        &:hover,
        &:focus-visible {
          color: var(--color-text-secondary-hover);
        }

        @media (max-width: 600px) {
          padding: 0 4px;
        }

        &.is-icon {
          font-size: 24px;
          padding: 0 4px;
        }
      }

      .nav-item-home {
        display: none;
      }
    }
  }

  @media (max-width: 600px) {
    height: 48px;
    overflow: hidden;

    .inner {
      display: block;

      .title {
        pointer-events: none;
        justify-content: flex-start;

        transition-property: transform, opacity;
        transition-duration: 0.2s;
        transition-delay: 0.35s;
      }

      .nav-arrow {
        display: block;
      }

      .nav-arrow {
        &::before,
        &::after {
          content: '';
          background-color: var(--color-text-secondary);
          display: block;
          position: absolute;
          top: 28px;
          width: 12px;
          height: 1px;
          transition:
            transform 0.6s $animationCurve,
            transform-origin 0.6s $animationCurve,
            top 0.6s $animationCurve;
        }

        &::before {
          transform-origin: 100% 100%;
          transform: rotate(40deg) scaleY(1.5);
          right: 50%;
        }

        &::after {
          transform-origin: 0% 100%;
          transform: rotate(-40deg) scaleY(1.5);
          left: 50%;
        }
      }

      .nav-items {
        width: 100%;
        flex-wrap: wrap;

        .nav-item {
          &:not(.is-icon) {
            justify-content: flex-start;
            width: 100%;
          }

          height: 48px;
          pointer-events: none;
          text-align: left;
          transform: translate(0, -10%);
          opacity: 0;

          transition:
            transform 0.4s,
            opacity 0.4s,
            color 0.5s;

          &.is-icon {
            display: inline-flex;
          }
        }

        .nav-item-home {
          display: flex;
        }
      }
    }

    .nav-open & {
      height: var(--open-height);

      .title {
        transform: translate(0, 8px);
        opacity: 0;

        transition-delay: 0s;
      }

      .nav-arrow {
        &::before,
        &::after {
          top: 16px;
        }

        &::before {
          transform-origin: 100% 0%;
          transform: rotate(-40deg) scaleY(1.5);
        }

        &::after {
          transform-origin: 0% 0%;
          transform: rotate(40deg) scaleY(1.5);
        }
      }

      .nav-items {
        .nav-item {
          pointer-events: initial;
          transform: translate(0, -0%);
          opacity: 1;

          transition:
            transform 0.4s calc(var(--index) * 0.05s + 0.1s),
            opacity 0.4s calc(var(--index) * 0.05s + 0.1s),
            color 0.5s;
        }
      }
    }
  }
}

.nav-mask > [order] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--color-background-primary-translucent);
  backdrop-filter: blur(10px);
  mask-image: linear-gradient(to bottom, #000, transparent);
  mask-composite: destination-in;
  pointer-events: none;
  z-index: 1000;
  transition:
    height 0.6s $animationCurve,
    backdrop-filter 0.6s $animationCurve;

  .nav-open & {
    backdrop-filter: blur(36px);
  }

  --height: 100px;
  $base: 1.2;
  @for $i from 1 through 6 {
    &[order='#{$i}'] {
      height: calc(var(--height) / math.pow(($base), ($i - 1)));

      @media (max-width: 600px) {
        .nav-open & {
          height: calc(var(--open-height) * 4 / math.pow(($base), ($i - 1)));
        }
      }
    }
  }
}