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

const styles = css`
  ${componentStyles}

  :host {
    --track-height: 0.15rem;
    --track-color: var(--flow-ui-color-neutral-200);
    --indicator-color: var(--flow-ui-color-primary-500);

    display: flex;
    justify-content: center;
    align-items: center;
  }

  .progress-bar {
    position: relative;
    background-color: var(--track-color);
    height: var(--track-height);
    width: 100%;
    border-radius: var(--flow-ui-border-radius-pill);
    box-shadow: inset var(--flow-ui-shadow-small);
    overflow: hidden;
  }

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

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

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

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

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

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

  .progress-bar__indicator {
    height: 100%;
    font-family: var(--flow-ui-font-sans);
    font-size: 12px;
    font-weight: var(--flow-ui-font-weight-normal);
    background-color: var(--indicator-color);
    text-align: center;
    line-height: var(--track-height);
    white-space: nowrap;
    overflow: hidden;
    transition:
      400ms width,
      400ms background-color;
    user-select: none;
  }

  .progress-bar__label-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Indeterminate */
  :host([indeterminate]) .progress-bar__indicator {
    position: absolute;
    animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
  }

  @media (forced-colors: active) {
    .progress-bar {
      outline: solid 1px SelectedItem;
      background-color: var(--flow-ui-color-neutral-0);
    }

    .progress-bar__indicator {
      outline: solid 1px SelectedItem;
      background-color: SelectedItem;
    }
  }

  @keyframes indeterminate {
    0% {
      left: -50%;
      width: 50%;
    }
    75%,
    100% {
      left: 100%;
      width: 50%;
    }
  }

  @keyframes indeterminate-rtl {
    0% {
      right: -50%;
      width: 50%;
    }
    75%,
    100% {
      right: 100%;
      width: 50%;
    }
  }
`;

export { styles as default };
