.header-panel {
  @extend .alignfull;
  @apply
    absolute
    top-14
    bottom-0
    select-none
    transition-all
    h-0
    transform-gpu
    duration-[0.85s]
    pointer-events-none
    overflow-hidden
    left-0
    z-[-1]
    right-0;

  box-shadow: 0 12px 12px -12px rgba(0, 0, 0, 0.1);

  &.active {
    @apply
      pointer-events-auto;
  }

  .inner {
    @apply
      min-h-[400px]
      shadow-bottom
      z-10
      h-full
      flex
      pt-12
      pb-12
      flex-col
      bg-white;

    .columns {
      @apply
        flex
        transition-all
        duration-500
        opacity-0
        h-full
        justify-between
        gap-8
        max-w-screen-2xl
        px-10;

      .column {
        @apply
          relative;

        h6 {
          @extend .has-xs-font-size;
          @apply
            mb-[2px]
            font-mono;
        }

        .links {
          @extend .has-sm-font-size;
          @apply
            flex
            mb-10
            flex-col;

          a {
            @apply
              inline-block
              transition-all
              duration-150
              leading-normal

              hover:opacity-50;
          }
        }

        .button {
          @apply
            justify-start
            text-left;
        }

        &.teasers {
          @apply
            w-full
            h-full
            flex
            items-center
            max-w-[200px];
        }

        .inside {
          @apply
            flex
            flex-col
            justify-center
            relative;
        }

        .teaser {
          @apply
            h-full
            w-full
            top-0
            bottom-0
            opacity-0
            hidden
            transition-all
            duration-300
            pointer-events-none;

          h4 {
            @apply
              text-sm
              mt-3
              my-2;
          }

          > div {
            @extend .has-xxs-font-size;
            @apply
              font-mono;
          }

          &.active {
            @apply
              flex
              flex-col
              justify-center
              opacity-100
              pointer-events-auto;
          }
        }
      }
    }
  }
}
