@layer components {
  .burger-menu {
    @apply relative block h-[var(--nav-icon-size)] w-[var(--nav-icon-size)];

    > div {
      @apply absolute top-[calc(50%-var(--nav-icon-border)/2)] h-[var(--nav-icon-border)] w-full bg-[#fff];
      transition:
        background-color 0.2s,
        top 0.2s,
        left 0.2s,
        transform 0.2s 0.15s;

      @apply before:absolute b:bottom-[calc(var(--nav-icon-size)/3)] b:left-0 b:h-[var(--nav-icon-border)] b:w-[66%] b:bg-[#fff];

      &:before {
        transition:
          bottom 0.2s 0.2s,
          left 0.1s,
          transform 0.2s,
          background-color 0.4s 0.2s;
      }

      @apply after:absolute a:right-0 a:top-[calc(var(--nav-icon-size)/3)] a:h-[var(--nav-icon-border)] a:w-[66%] a:bg-[#fff];

      &:after {
        transition:
          top 0.2s 0.2s,
          right 0.1s,
          transform 0.2s,
          background-color 0.4s 0.2s;
      }
    }

    &.active {
      > div {
        @apply bg-transparent;

        @apply b:bottom-0 b:left-[calc(var(--nav-icon-size)/6)] b:-rotate-45 b:bg-white;

        &:before {
          transition:
            background-color 0.2s,
            bottom 0.2s,
            left 0.2s,
            transform 0.2s 0.15s;
        }

        @apply a:right-[calc(var(--nav-icon-size)/6)] a:top-0 a:rotate-45 a:bg-white;

        &:after {
          transition:
            background-color 0.2s,
            top 0.2s,
            right 0.2s,
            transform 0.2s 0.15s;
        }
      }
    }
  }

  .button-border {
    @apply rounded-md border-2 border-gray-600/50 hfa:border-gray-400/30;
  }

  /*=============== HEADINGS ===============*/
  .heading-xxl {
    @apply mb-6 text-4xl font-extrabold leading-tight tracking-tight text-gray-900 md:text-5xl lg:text-6xl;
  }

  .heading-hero {
    @apply mb-4 text-3xl font-extrabold leading-tight text-gray-900 md:text-4xl lg:text-5xl;

    & strong {
      @apply bg-gradient-to-r from-cyan-500 via-sky-500 to-blue-500 bg-clip-text text-transparent;
    }
  }

  .subheading-hero {
    @apply mb-3 text-2xl font-bold leading-snug tracking-tight text-gray-800 md:text-3xl lg:text-4xl;
  }

  .heading-3xl {
    @apply mb-4 text-2xl font-bold leading-tight tracking-tight text-gray-900 md:text-3xl lg:text-4xl;
  }

  .heading-2xl {
    @apply mb-4 text-xl font-bold leading-snug tracking-tight text-gray-900 md:text-2xl lg:text-3xl;
  }

  .heading-xl {
    @apply mb-3 text-lg font-semibold leading-snug tracking-tight text-gray-900 sm:text-xl lg:text-2xl;
  }

  .heading-lg {
    @apply mb-3 text-lg font-semibold leading-snug tracking-tight text-gray-900 sm:text-xl md:text-2xl lg:text-3xl;
  }

  .heading-md {
    @apply mb-2 text-base font-semibold leading-snug text-gray-800 md:text-lg lg:text-xl;
  }

  .heading-base {
    @apply mb-2 text-base font-semibold text-gray-800 md:text-lg;
  }

  .heading-sm {
    @apply mb-1 text-sm font-semibold text-gray-700 md:text-base;
  }

  .heading-xs {
    @apply mb-1 text-xs font-semibold text-gray-700 md:text-sm;
  }

  /*=============== PARAGRAPH ===============*/
  .paragraph-xl {
    @apply max-w-3xl text-xl leading-relaxed text-gray-600 md:text-2xl xl:max-w-4xl [&>p+p]:mt-4;
  }

  .paragraph-lg {
    @apply max-w-2xl text-lg leading-relaxed text-gray-600 md:text-xl xl:max-w-3xl [&>p+p]:mt-4;
  }

  .paragraph-md {
    @apply max-w-2xl text-base leading-relaxed text-gray-600 md:text-lg [&>p+p]:mt-4;
  }

  .paragraph-sm {
    @apply max-w-xl text-sm leading-relaxed text-gray-500 md:text-base [&>p+p]:mt-4;
  }

  .paragraph-xs {
    @apply max-w-md text-xs leading-normal text-gray-500 md:text-sm [&>p+p]:mt-3;
  }

  .button,
  .button-secondary {
    @apply relative inline-flex min-w-fit cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap rounded-md px-4 py-3 text-sm font-medium leading-4 transition-all duration-100 f:outline-none f:ring-2 f:ring-accent-contrast/80 f:ring-offset-2;
  }

  .button:not(.button-secondary) {
    @apply border border-accent/80 bg-accent text-accent-contrast shadow-accent/25 h:bg-accent/70;
  }

  .button-secondary {
    @apply border border-accent/30 bg-gray-400/[0.04] text-gray-600 backdrop-blur-md hfa:border-accent/60 hfa:bg-gray-400/[0.07] hfa:text-gray-900;
  }

  .form-label {
    @apply mb-1.5 flex h-5 text-sm text-gray-700;
  }

  .form-input {
    @apply relative w-full rounded border border-gray-200 bg-bg py-2 pl-3 pr-10 text-left text-sm text-gray-600 placeholder-gray-400/60 transition-colors hfva:ring-transparent fa:border-gray-900 h:border-gray-400 f:h:border-gray-900;
  }

  .card {
    @apply rounded-md border border-gray-200 bg-bg p-3.5 transition-[border-color] hfa:border-gray-400/60;
  }

  .section {
    @apply mx-auto w-full max-w-8xl px-[var(--section-padding)];
  }
}

@layer base {
  :root {
    @apply [--section-padding:1rem] sm:[--section-padding:2rem] lg:[--section-padding:4rem];
  }
}

@layer utilities {
  .scrollbar-none {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .scrollbar-none::-webkit-scrollbar {
    background: transparent;
    width: 0;
    height: 0;
  }
}