@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;

:host {
  flex-grow: var(--sky-layout-host-header-flex-grow, 0);
  display: block;
}

.sky-page-header {
  margin: var(--sky-layout-host-header-spacing, 0);

  &-info {
    display: flex;
  }

  &-text {
    margin: 0;
  }

  &-page-title,
  &-parent-link-wrapper {
    display: inline-block;
    block-size: fit-content;
  }

  &-parent-link {
    color: $sky-text-color-action-primary;
  }

  &-chevron {
    font-size: 16px;
    margin: 0 $sky-space-md;
  }

  &-chevron,
  &-parent-link,
  &-page-title {
    vertical-align: middle;
  }

  &-content {
    &:empty {
      display: none;
    }
  }
}

@include mixins.sky-theme-modern() {
  .sky-page-header {
    &-parent-link {
      color: $sky-theme-modern-text-color-action-primary;
    }
  }
}

@include mixins.sky-theme-modern-dark() {
  .sky-page-header {
    &-parent-link {
      color: $sky-theme-modern-mode-dark-text-color-action-primary;
    }
  }
}
