@import "tailwindcss/theme";
@import "../variables/theme.css";

.header {
  @apply relative z-20 bg-white;

  box-shadow: inset 0 -1px 0 0 var(--color-neutral-300);

  @variant md {
    min-height: auto;
  }

  &:has(.header-navOpen) {
    @apply shadow-none;

    height: calc(100dvh - var(--spacing-40));
    clip-path: polygon(
      0 0,
      100% 0,
      100% 100%,
      27.22% 100%,
      18.88% 88.33%,
      0 88.33%
    );
  }

  &:has(.header-navOpen) .header-container {
    height: 100%;
  }

  &:has(.header-navOpen) .header-logoContainer {
    padding-bottom: var(--spacing-8);
  }

  &:has(.header-navOpen) .header-logoOriginal {
    @apply hidden;
  }

  &:has(.header-navOpen) .header-logoEngHorizon {
    @apply inline-block;
  }

  &:has(.header-navOpen) .header-controlIcon {
    transform: scale(0.8);
  }

  &:has(.header-navOpen) .header-controlIconMenu {
    @apply hidden;
  }

  &:has(.header-navOpen) .header-controlIconClose {
    @apply inline-block;
  }

  &:has(.header-navOpen) .header-nav {
    @apply flex;
  }

  &:has(.header-navOpen) .header-foot {
    @apply block;
  }

  .header-logoEngHorizon--transparent,
  .header-logoOriginal--transparent {
    @apply hidden;
  }
}

.header--transparent {
  @apply bg-transparent shadow-none;

  .header-nav {
    @variant md {
      @apply text-white;
    }
  }

  .header-navControl {
    --icon-color: var(--color-white);
  }

  .header-logoEngHorizon,
  .header-logoOriginal {
    @apply hidden;
  }

  .header-logoOriginal--transparent {
    @apply inline-block;

    @variant lg {
      @apply hidden;
    }
  }

  .header-logoEngHorizon--transparent {
    @variant lg {
      @apply inline-block;
    }
  }

  &:has(.header-navOpen) {
    @apply bg-white;
  }

  &:has(.header-navOpen) .header-navControl {
    --icon-color: var(--color-neutral-900);
  }
}

&:has(.header-navOpen) {
  @apply overflow-hidden;
}

&:has(.header-navOpen)::after {
  @apply fixed top-0 left-0 z-10 h-full w-full bg-black/60;

  content: "";
  backdrop-filter: blur(5px);
}

.header-container {
  @apply flex flex-col;

  padding-block: var(--spacing-8);

  @variant md {
    @apply flex-row items-center justify-between;
  }
}

.header-logoContainer {
  @apply flex-none;

  line-height: 0;
}

.header-logo {
  --logo-width: auto;
  --logo-height: 40px;

  @variant lg {
    --logo-height: 43px;
  }
}

.header-logoOriginal {
  @variant lg {
    @apply hidden;
  }
}

.header-logoEngHorizon {
  @apply hidden;

  @variant lg {
    @apply block;
  }
}

.header-navContainer {
  @apply flex-auto content-center justify-items-center text-center;

  @variant md {
    @apply h-fit items-center justify-items-end text-left;
  }
}

.header-nav {
  @apply hidden flex-col justify-end text-neutral-900;

  gap: var(--spacing-lg-sm);

  @variant md {
    @apply flex flex-row justify-center;

    gap: var(--spacing-md-2xs);
  }

  @variant lg {
    gap: var(--spacing-lg-2xs);
  }
}

.header-navActive {
  @apply text-blue-500;
}

.header-navTarget {
  padding-inline: var(--spacing-8);
  padding-top: 10px;
  padding-bottom: 8px;
  font: var(--t3-medium);
}

.header-navControl {
  --icon-color: var(--color-neutral-900);

  @apply absolute p-0;

  top: var(--spacing-8);
  right: var(--spacing-16);
  width: var(--spacing-40);
  height: var(--spacing-40);

  @variant md {
    @apply hidden;
  }
}

.header-controlIcon {
  @apply h-40 w-40;
}

.header-controlIconClose {
  @apply hidden;
}

.header-foot {
  @apply hidden text-right text-blue-500;

  font: var(--h5-bold);
}