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

const styles = css`
  ${componentStyles}

  :host {
    --color: var(--flow-ui-divider-color);
    --width: var(--flow-ui-divider-width);
    --spacing: var(--flow-ui-spacing-medium);

    /* Maintain divider width when used in flexbox layouts */
    flex: 0 0 auto;
    background-clip: content-box;
    background-color: var(--color);
  }

  :host(:not([vertical])) {
    display: block;
    height: var(--width);
    margin: var(--spacing) 0;
    padding: 0 var(--inset);
  }

  :host([vertical]) {
    display: inline-block;
    width: var(--width);
    height: 100%;
    margin: 0 var(--spacing);
    padding: var(--inset) 0;
  }
`;

export { styles as default };
