header {
  @apply fixed
    left-0
    top-0
    bg-[rgba(0,0,0,0.25)]
    w-full
    h-12 md:h-16 xxl:h-20
    px-4 md:px-6 xxl:px-8
    z-10
    text-white
    shadow-inner;
  backdrop-filter: blur(0.5rem);
  transition: 0.2s ease-out;

  &:hover,
  &.open {
    @apply bg-white 
      text-black;
  }

  .header {
    &-content {
      @apply relative
        h-full
        flex
        flex-row
        justify-between
        content-center;

      > .media-holder {
        @apply relative
          w-56
          h-4
          text-white
          overflow-visible;
      }
      .nav {
        &-toggle {
          &-wrapper {
            @apply relative 
            lg:hidden
            self-center
              w-4
              h-4
              cursor-pointer;

            &.open {
              .nav-toggle {
                &-close {
                  @apply opacity-100;
                }
                &-open {
                  @apply opacity-0;
                }
              }
            }
          }

          &-close {
            @apply opacity-0;
          }

          &-open,
          &-close {
            @apply absolute
              top-0
              bottom-0
              left-0
              right-0;
            transition: 0.2s;
          }
        }
      }
    }
    &-logo {
      @apply h-3 lg:h-4 self-center;
    }
  }
}