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

const styles = css`
  ${componentStyles}

  :host {
    --transition-delay: 1s;
    --transition-duration: 0.3s;

    --progress-ring-size: 1.5em;
    --progress-ring-track-width: 0.15em;
    --progress-ring-track-color: transparent;
    --progress-ring-indicator-color: var(--flow-ui-busy-overlay-color);

    --overlay-background-color: var(--flow-ui-busy-overlay-background-color);

    display: block;
    position: relative;
  }

  .busy-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: grey;
    background-color: var(--overlay-background-color);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-duration) ease-in-out;
    z-index: 1;
  }

  :host([overlay-parent]) {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 1;
  }

  :host([busy]) .busy-overlay {
    opacity: 1;
    transition-delay: var(--transition-delay);
    pointer-events: all;
  }

  :host([size='small']) {
    --progress-ring-size: 1em;
    --progress-ring-track-width: 0.15em;
  }

  :host([size='medium']) {
    --progress-ring-size: 1.5em;
    --progress-ring-track-width: 0.15em;
  }

  :host([size='large']) {
    --progress-ring-size: 2.25em;
    --progress-ring-track-width: 0.15em;
  }

  :host([variant='primary']) {
    --progress-ring-indicator-color: var(--flow-ui-color-primary-500);
  }

  :host([variant='secondary']) {
    --progress-ring-indicator-color: var(--flow-ui-color-secondary-500);
  }

  :host([variant='success']) {
    --progress-ring-indicator-color: var(--flow-ui-color-success-500);
  }

  :host([variant='neutral']) {
    --progress-ring-indicator-color: var(--flow-ui-busy-overlay-color);
  }

  :host([variant='warning']) {
    --progress-ring-indicator-color: var(--flow-ui-color-warning-500);
  }

  :host([variant='danger']) {
    --progress-ring-indicator-color: var(--flow-ui-color-danger-500);
  }

  flow-ui-progress-ring::part(base) {
    --size: var(--progress-ring-size);
    --track-width: var(--progress-ring-track-width);
    --indicator-width: var(--track-width);
    --track-color: var(--progress-ring-track-color);
    --indicator-color: var(--progress-ring-indicator-color);
  }
`;

export { styles as default };
