@import "../../styles/variables.scss";
@import "../common/typography/text.mixins.scss";

:host {
  display: block;
  background-color: var(--background-bright, $white);

  .spacer {
    flex: 1 1 0%;
  }

  &[size="small"] {
    & > section {
      height: 3.6rem;
    }
  }

  &.header-size-small > section {
    height: 3.2rem;
  }
  &.header-size-default > section {
    height: 5rem;
  }
  &.header-size-large > section {
    height: 6.4rem;
  }

  & > section {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 $spacing-lg;
    gap: $spacing-sm;
    box-sizing: border-box;
    // line-height: 4rem;

    .header-icon {
      font-size: var(--font-size-2xl);
    }
    div.header-title {
      display: flex;
      align-items: center;
      gap: $spacing-sm;
      // making room for ellipsis
      padding-inline-end: 2em;
      // prevent pushing other flex content
      min-width: 0;
      flex-shrink: 1;
      .novo-title {
        overflow: hidden;
      }

      ::ng-deep novo-icon {
        margin-right: 1rem;
      }
    }
    .header-titles {
      display: flex;
      flex-direction: column;
      max-width: 100%;
      .novo-title {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      h1 {
        @include novo-title-text();
        margin: 0;
        padding: 0;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding-right: 20px;
      }
    }
    > ::ng-deep section {
      flex: 2 2 250px;
      min-width: 100px;
    }
    ::ng-deep utils,
    ::ng-deep novo-utils {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: $spacing-sm;
    }

    ::ng-deep .novo-action {
      display: flex;
    }
  }

  @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
    &.novo-accent-#{$name} {
      .header-titles,
      .header-title {
        ::ng-deep .novo-icon {
          color: $color;
        }
      }
      & > section:first-of-type {
        border-bottom: 2px solid $color;
      }
    }
    &.novo-theme-#{$name} {
      & > section:first-of-type {
        background: $color;
        color: $contrast;
        border-bottom: none;
      }
      ::ng-deep .novo-title {
        color: inherit;
        overflow: hidden;
        padding-right: 0.5rem;
      }
      ::ng-deep .novo-action {
        button,
        .novo-button {
          color: inherit;
        }
      }
    }
  }

  & > main {
    padding: 4px 16px 4px 32px;
  }
  & > ::ng-deep novo-nav {
    padding-left: 16px;
    &.block {
      padding-left: 0;
    }
  }
  &.condensed {
    .header-title,
    .header-titles {
      line-height: 1.375;
    }
    > section {
      height: 3.6rem;
    }
    ::ng-deep .novo-icon {
      margin-right: 0.5rem !important;
      font-size: 1.8rem;
    }
  }

  .header-actions {
    display: flex;
    flex-flow: row nowrap;
  }
}