.header-panel {
  @extend .alignfull;
  @apply
    absolute
    top-0
    bottom-0
    select-none
    transition-all
    h-full
    -my-10
    left-0
    transform-gpu
    duration-[0.85s]
    pointer-events-none
    overflow-hidden
    translate-x-[103vw]
    z-[9999]
    right-0

    lg:top-14
    lg:my-0
    lg:h-0
    lg:translate-x-0
    lg:z-[-1];

  box-shadow: -5px 0 5px 0 rgba(0, 0, 0, 0.05);

  @screen lg {
    box-shadow: 0 12px 12px -12px rgba(0, 0, 0, 0.1);
  }

  &.active {
    @apply
      translate-x-0
      left-0
      pointer-events-auto;
  }

  .close {
    @apply
      text-left
      mt-10
      flex
      px-5
      z-50
      bg-white
      w-full
      lg:hidden
      justify-start;

    span {
      @apply
        ml-3
        text-xs
        font-light
        uppercase;
    }

    svg {
      @apply
        ml-0;
    }
  }

  .inner {
    @apply
      min-h-[400px]
      z-10
      py-8
      h-full
      flex
      flex-col
      bg-white

      lg:py-12;

    .columns {
      @apply
        transition-all
        duration-500
        justify-start
        h-full
        gap-8
        overflow-auto
        pb-12
        max-w-screen-2xl
        opacity-0
        text-left
        grid-cols-1
        px-5

        lg:grid
        lg:overflow-visible
        lg:px-10
        lg:grid-cols-4
        lg:justify-between;

      .column {
        @apply
          mb-10
          lg:mb-0
          relative;

        h6 {
          @extend .has-xs-font-size;
          @apply
            font-mono
            mb-1

            lg:mb-[2px];
        }

        .link {
          &.see-all {
            @extend .button;
            @extend .button.arrow;
            @apply
              uppercase
              text-primary-500
              text-xs
              font-light;
          }
        }

        .links {
          @apply
            flex
            mb-10
            text-primary-500
            text-lg
            flex-col

            lg:text-sm;

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

              hover:opacity-50;

            &.active {
              @apply
                opacity-50;
            }
          }
        }

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

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

            lg:flex;
        }

        &.category {
          [data-clicked] {
            @apply
              text-primary-250;
          }
        }

        &.category-image {
          img {
            @apply
              min-w-[170px];
          }

          .links {
            &.desktop {
              @apply
                hidden
                lg:inline-block;

              &.active {
                @apply
                  hidden
                  lg:inline-block;
              }
            }

            span {
              @apply
                inline-block
                mt-2.5;
            }
          }
        }

        &.subcategory {
          &.desktop {
            @apply
              hidden

              lg:inline-block;
          }

          &.mobile {
            @apply
              absolute
              bg-white
              top-0
              -mx-5
              transition-all
              duration-[0.85s]
              h-full
              w-full
              translate-x-[100vw]
              inline-block

              lg:hidden;

            .inner {
              @apply
                py-12
                px-5;
            }

            &.active {
              @apply
                translate-x-0;
            }

            .links {
              @apply
                opacity-100
                inline-block
                pointer-events-auto;
            }
          }
        }

        &.subcategory,
        &.category-image {
          @apply
            relative;

          .links {
            @apply
              hidden
              opacity-0
              transition-all
              duration-100
              pointer-events-none
              top-0

              lg:block
              lg:absolute;

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

        .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;
          }
        }
      }
    }
  }
}
