import { css } from 'lit';
import componentStyles from '../../styles/component.styles.mjs';
import formControlStyles from '../../styles/form-control.styles.mjs';

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

  :host {
    --thumb-size: 14px;
    --track-color-active: var(--flow-ui-range-track-color-active, var(--flow-ui-color-primary-500));
    --track-color-inactive: var(--flow-ui-range-track-color-inactive, var(--flow-ui-color-neutral-600));
    --track-active-offset: 0%;
    --track-height: 6px;

    display: block;
  }

  /* Size modifiers */
  :host([size='small']) {
    --thumb-size: calc(var(--flow-ui-control-height-small) * 0.7);
    --track-height: 4px;
  }

  :host([size='medium']) {
    --thumb-size: calc(var(--flow-ui-control-height-medium) * 0.6);
    --track-height: 6px;
  }

  :host([size='large']) {
    --thumb-size: calc(var(--flow-ui-control-height-large) * 0.6);
    --track-height: 8px;
  }

  .form-control.form-control--inline {
    grid-template-columns: 1fr 1fr;
  }

  .form-control.form-control--inline .form-control__input {
    background-color: transparent;
  }

  .form-control .form-control__input,
  .form-control:not(.form-control--disabled) .form-control__input:hover,
  .form-control:not(.form-control--disabled).form-control--focused .form-control__input {
    background-color: transparent;
    border-color: transparent;
    border-width: 0;
  }

  .form-control:not(.form-control--inline) .form-control__input {
    margin-top: -4px;
  }

  .range {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--control-spacing);
  }

  .range__control {
    --percent: 0%;
    -webkit-appearance: none;
    border-radius: 3px;
    width: 100%;
    height: var(--track-height);
    background: transparent;
    line-height: var(--flow-ui-control-height-medium);
    vertical-align: middle;
    margin: 0;

    background-image: linear-gradient(
      to right,
      var(--track-color-inactive) 0%,
      var(--track-color-inactive) min(var(--percent), var(--track-active-offset)),
      var(--track-color-active) min(var(--percent), var(--track-active-offset)),
      var(--track-color-active) max(var(--percent), var(--track-active-offset)),
      var(--track-color-inactive) max(var(--percent), var(--track-active-offset)),
      var(--track-color-inactive) 100%
    );
  }

  .range--rtl .range__control {
    background-image: linear-gradient(
      to left,
      var(--track-color-inactive) 0%,
      var(--track-color-inactive) min(var(--percent), var(--track-active-offset)),
      var(--track-color-active) min(var(--percent), var(--track-active-offset)),
      var(--track-color-active) max(var(--percent), var(--track-active-offset)),
      var(--track-color-inactive) max(var(--percent), var(--track-active-offset)),
      var(--track-color-inactive) 100%
    );
  }

  /* Webkit */
  .range__control::-webkit-slider-runnable-track {
    width: 100%;
    height: var(--track-height);
    border-radius: 3px;
    border: none;
  }

  .range__control::-webkit-slider-thumb {
    border: none;
    width: var(--thumb-size);
    height: var(--thumb-size);
    border-radius: 50%;
    background-color: var(--flow-ui-color-primary-500);
    border: solid var(--flow-ui-control-border-width) var(--flow-ui-color-primary-500);
    -webkit-appearance: none;
    margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);
    cursor: pointer;
  }

  .range__control:enabled::-webkit-slider-thumb:hover {
    background-color: var(--flow-ui-color-primary-400);
    border-color: var(--flow-ui-color-primary-400);
  }

  .range__control:enabled:focus-visible::-webkit-slider-thumb {
    outline: var(--flow-ui-focus-ring);
    outline-offset: var(--flow-ui-focus-ring-offset);
  }

  .range__control:enabled::-webkit-slider-thumb:active {
    background-color: var(--flow-ui-color-primary-400);
    border-color: var(--flow-ui-color-primary-400);
    cursor: grabbing;
  }

  /* Firefox */
  .range__control::-moz-focus-outer {
    border: 0;
  }

  .range__control::-moz-range-progress {
    background-color: var(--track-color-active);
    border-radius: 3px;
    height: var(--track-height);
  }

  .range__control::-moz-range-track {
    width: 100%;
    height: var(--track-height);
    background-color: var(--track-color-inactive);
    border-radius: 3px;
    border: none;
  }

  .range__control::-moz-range-thumb {
    border: none;
    height: var(--thumb-size);
    width: var(--thumb-size);
    border-radius: 50%;
    background-color: var(--flow-ui-color-primary-500);
    border-color: var(--flow-ui-color-primary-500);
    transition:
      var(--flow-ui-transition-fast) border-color,
      var(--flow-ui-transition-fast) background-color,
      var(--flow-ui-transition-fast) color,
      var(--flow-ui-transition-fast) box-shadow;
    cursor: pointer;
  }

  .range__control:enabled::-moz-range-thumb:hover {
    background-color: var(--flow-ui-color-primary-400);
    border-color: var(--flow-ui-color-primary-400);
  }

  .range__control:enabled:focus-visible::-moz-range-thumb {
    outline: var(--flow-ui-focus-ring);
    outline-offset: var(--flow-ui-focus-ring-offset);
  }

  .range__control:enabled::-moz-range-thumb:active {
    background-color: var(--flow-ui-color-primary-400);
    border-color: var(--flow-ui-color-primary-400);
    cursor: grabbing;
  }

  /* States */
  .range__control:focus-visible {
    outline: none;
  }

  .range__control:disabled {
    opacity: 0.5;
  }

  .range__control:disabled::-webkit-slider-thumb {
    cursor: not-allowed;
  }

  .range__control:disabled::-moz-range-thumb {
    cursor: not-allowed;
  }

  .input__prefix,
  .input__suffix {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    cursor: default;
  }

  .range__prefix::slotted(flow-ui-icon),
  .range__suffix::slotted(flow-ui-icon) {
    color: var(--flow-ui-control-icon-color);
  }

  .number-input.no-input {
    display: none;
  }

  @media (forced-colors: active) {
    .range__control,
    .range__control::-webkit-slider-thumb {
      border: solid 1px transparent;
    }

    .range__control::-moz-range-thumb {
      border: solid 1px transparent;
    }
  }

  .number-input::part(input) {
    text-align: right;
  }
`;

export { styles as default };
