:host {
  @apply block box-border bg-white px-4 pt-4 pb-2;
}

header {
  @apply grid grid-flow-col items-center grid-cols-3 relative;
}

.brand {
  img {
    @apply w-48;
  }
}

.navigation {
  @apply grid grid-flow-row gap-y-2 items-center;

  .navigation-content {
    @apply hidden absolute top-14 -right-2 grid-flow-row gap-y-4 items-center justify-center bg-white rounded shadow p-4 z-popover;

    &.open {
      @apply grid;
    }
  }

  .external-content {
    @apply grid grid-flow-col gap-x-4 items-center justify-center;
  }

  @screen tablet {
    .navigation-content {
      @apply grid relative top-auto right-auto bg-transparent shadow-none rounded-none p-0;
    }
  }
}

.section-toggle {
  @apply hidden;

  @screen tablet {
    @apply inline-flex;
  }
}

.more-toggle-btn {
  @apply p-2 text-right;
  color: var(--shell-header-button-color);

  &.active,
  &:focus,
  &:hover {
    color: var(--shell-header-button-color-active);
  }
}

::ng-deep shell-header {
  .navigation {
    button,
    a {
      @apply grid grid-flow-col gap-x-2 justify-center items-center p-2 font-bold;
    }
  }

  .external-content {
    button,
    a {
      @apply p-4 grid grid-flow-col items-center justify-center gap-2 font-bold;
      color: var(--shell-header-button-color);

      &.active,
      &:focus,
      &:hover {
        color: var(--shell-header-button-color-active);
      }

      &[disabled] {
        color: var(--shell-header-button-color-disabled);
      }
    }
  }
}
