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

const styles = css`
  ${componentStyles}

  :host {
    display: block;
    min-height: 0;
  }

  :host([hidden]) {
    min-height: 0;
  }

  .split-view-pane {
    height: 100%;
    display: flex;
    flex-direction: row;
  }

  :host([vertical]) .split-view-pane {
    flex-direction: column;
  }

  .split-view-pane--hidden {
    display: none;
  }

  /* Body */

  .split-view-pane__contents {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .split-view-pane--vertical .split-view-pane__contents {
    /* Ensure panel ignores minimum content height */
    min-height: 0;
  }

  .split-view-pane--horizontal .split-view-pane__contents {
    /* Ensure panel ignores minimum content height */
    min-width: 0;
  }
`;

export { styles as default };
