import { css } from 'lit';
import componentStyles from '../../styles/component.styles.mjs';

const styles = css`
  ${componentStyles}

  :host {
    display: block;

    --padding: var(--flow-ui-panel-header-padding);
    --header-height: var(--flow-ui-panel-header-height);
    --background-color: var(--flow-ui-panel-header-background-color);
    --color: var(--flow-ui-panel-header-color);
    --accessory-color: var(--flow-ui-panel-header-accessory-color);
  }

  .panel-header {
    display: flex;
    align-items: center;
    gap: var(--flow-ui-spacing-small);

    height: var(--header-height);
    padding: var(--padding);

    color: var(--color);
    background-color: var(--background-color);
    user-select: none;
  }

  .panel-header__prefix,
  .panel-header__suffix,
  .panel-header__icon {
    color: var(--accessory-color);
  }

  .panel-header__title-slot {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
  }

  .panel-header__title {
    font-size: var(--flow-ui-panel-header-font-size);
    font-weight: var(--flow-ui-panel-header-font-weight);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .panel-header__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    transition: var(--flow-ui-transition-medium) rotate ease;
  }

  .panel-header--open .panel-header__icon {
    rotate: 90deg;
  }

  .panel-header--open slot[name='expand-icon'],
  .panel-header:not(.panel-header--open) slot[name='collapse-icon'] {
    display: none;
  }
`;

export { styles as default };
