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

const styles = css`
  ${componentStyles}

  :host {
    display: block;
    position: relative;
    background: var(--flow-ui-menu-background-color);
    border: solid var(--flow-ui-menu-border-width) var(--flow-ui-menu-border-color);
    border-radius: var(--flow-ui-border-radius-medium);
    padding: var(--flow-ui-spacing-x-small) 0;
    overflow: auto;
    overscroll-behavior: none;
  }

  ::slotted(flow-ui-divider) {
    --spacing: var(--flow-ui-spacing-x-small);
    --inset: var(--flow-ui-spacing-medium);
    --color: var(--flow-ui-menu-divider-color);
  }

  ::slotted(small) {
    display: block;
    font-size: var(--flow-ui-menu-divider-font-size);
    font-weight: var(--flow-ui-font-weight-semibold);
    color: var(--flow-ui-menu-divider-text-color);
    padding-block: var(--flow-ui-spacing-2x-small);
    padding-inline: var(--flow-ui-spacing-medium);
  }
`;

export { styles as default };
