import { css } from 'lit';
import componentStyles from '../../styles/component.styles.mjs';
import overlayScrollbarStyles from './overlay-scrollbar.styles.mjs';

const styles = css`
  ${componentStyles}
  ${overlayScrollbarStyles}

  :host {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .scroll-view__host {
    flex: 1;
  }

  .os-theme-flow {
    --transition-speed: var(--flow-ui-scrollbar-transition, var(--flow-ui-transition-slow, 0.5s));

    box-sizing: border-box;
    --os-size: 10px;
    --os-padding-perpendicular: 2px;
    --os-padding-axis: 2px;
    --os-track-border-radius: 10px;
    --os-handle-interactive-area-offset: 4px;
    --os-handle-border-radius: 10px;

    /* Colors */
    --os-handle-bg: var(--flow-ui-scroll-handle-bg, var(--flow-ui-color-neutral-500));
    --os-handle-bg-hover: var(--flow-ui-scroll-handle-bg-hover, var(--flow-ui-color-neutral-600));
    --os-handle-bg-active: var(--flow-ui-scroll-handle-bg-active, var(--flow-ui-color-neutral-700));
  }

  .os-scrollbar.os-theme-flow {
    transition: opacity var(--transition-speed), visibility var(--transition-speed), top var(--transition-speed),
      right var(--transition-speed), bottom var(--transition-speed), left var(--transition-speed);
  }

  .os-scrollbar.os-theme-flow .os-scrollbar-track {
    transition: opacity var(--transition-speed), background-color var(--transition-speed),
      border-color var(--transition-speed);
  }

  .os-scrollbar-horizontal.os-theme-flow .os-scrollbar-handle {
    transition: opacity var(--transition-speed), background-color var(--transition-speed),
      border-color var(--transition-speed), height var(--transition-speed);
  }

  .os-scrollbar-vertical.os-theme-flow .os-scrollbar-handle {
    transition: opacity var(--transition-speed), background-color var(--transition-speed),
      border-colorvar(--transition-speed), width var(--transition-speed);
  }
`;

export { styles as default };
