@import 'element:ef-panel';
@import 'element:ef-header';
@import 'element:ef-icon';
@import '../responsive';

:host {
  [part='toggle'] {
    transition: @global-transition-duration @global-transition-easing;
    opacity: 0.5;
    margin-right: 0.25em;
    margin-left: extract(@header-padding, 2);
    flex-shrink: 0;
    pointer-events: none;
  }

  &[expanded] [part='toggle'] {
    transform: rotate(90deg);
  }

  [part~='header'] {
    .touch-action();
    cursor: pointer;

    padding: 0;
    &[focused='visible'] {
      background-color: @button-hover-background-color;
      outline: 1px solid @input-focused-border-color;
      outline-offset: -1px;
    }
  }

  [part='header-label'] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    outline: none;
  }

  @keyframes expand {
    from {
      height: 0;
    }

    to {
      height: var(--target-height);
    }
  }

  @keyframes collapse {
    from {
      height: var(--target-height);
    }

    to {
      height: 0;
    }
  }

  [part='content'] {
    animation-duration: @global-transition-duration;
    animation-timing-function: @global-transition-easing;
  }

  &:not([expanded]) {
    [part='content'] {
      height: 0;
      animation-name: collapse;
    }

    [part='toggle'] {
      transform: rotate(0deg);
    }
  }

  &[expanded] [part='content'] {
    animation-name: expand;
  }

  [part='content'] ef-panel {
    overflow: auto;
    &:not([spacing]) {
      padding: var(--panel-padding);
    }
  }
}