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

const styles = css`
  ${componentStyles}

  :host {
    display: block;
  }

  .split-view {
    display: grid;
    height: 100%;
  }

  :host([vertical]) .split-view--animating {
    transition: grid-template-rows var(--flow-ui-transition-medium) ease;
  }

  :host(:not([vertical])) .split-view--animating {
    transition: grid-template-columns var(--flow-ui-transition-medium) ease;
  }

  .split-view[dragging] {
    cursor: ew-resize;
  }

  :host([vertical]) .split-view[dragging] {
    cursor: ns-resize;
  }
`;

export { styles as default };
