@import '../../styles/common.scss';

.container {
  @include boxSizing;

  height: $page-header-height;
  display: grid;
  grid-template-columns: minmax(30%, 1fr) auto;
  grid-template-rows: 1fr;

  @media only screen and (min-width: $XL-min-size) {
    grid-template-columns: minmax(25%, 1fr) max-content max-content;
  }

  color: var(--page-header-color, $page-header-color);
  background-color: var(
    --page-header-background-color,
    $page-header-background-color
  );

  .titles {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: max-content max-content;

    padding: 0px 30px;

    .title {
      justify-items: start;

      margin-top: 15px;

      font-size: 30px;
    }

    .subtitle {
      justify-items: start;

      margin-top: 12px;

      color: var(--page-header-subtitle-color, $page-header-subtitle-color);
      font-size: 16px;
    }

    .title,
    .subtitle {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }

  .actions {
    display: grid;
    grid-auto-flow: column;
    grid-gap: 1px;
  }

  .spacer {
    display: grid;
    width: 8px;
  }
}
