@import 'element:ef-icon';
@import '../shared-styles/close-button';
@import '../responsive';

:host {
  --heading-text-color: @header-text-color;
  --heading-background-color: @scheme-color-primary;
  --text-color: @dataviz-color-black;
  --background-color: lighten(@color-scheme-primary, 30%);
  --border-color: @control-border-color;

  &[state='highlight'] {
    --heading-background-color: @color-scheme-complementary;
  }

  &[state='info'] {
    --heading-background-color: @scheme-color-secondary;
  }

  display: flex;
  align-items: center;
  background: var(--background-color);
  color: var(--text-color);
  outline: solid 1px var(--border-color);
  font-size: @header-font-size;
  height: @header-height;

  // padding for each item in the slot
  ::slotted(*) {
    padding-right: 10px;
  }

  [part='heading'] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    height: 100%;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0 15px;
    background: var(--heading-background-color);
    color: var(--heading-text-color);
  }

  [part='message'] {
    flex: 1 1000000 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-left: 10px;
    text-align: inherit;
  }

  [part='right'] {
    flex: 0 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  [part='close'] {
    .touch-action();
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    stroke-width: 0.11em;
    cursor: pointer;
  }
}