@layer components {
  /* Risk Slider - green to red gradient for probability/impact
  /* ------------------------------------------------------------------------ */

  .risk-slider {
    appearance: none;
    background: linear-gradient(
      to right,
      oklch(var(--lch-green-medium)),
      oklch(var(--lch-yellow-medium)),
      oklch(var(--lch-red-medium))
    );
    block-size: 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    inline-size: 100%;

    &::-webkit-slider-thumb {
      appearance: none;
      background: var(--color-ink-inverted);
      block-size: 1.25rem;
      border: 2px solid var(--color-ink);
      border-radius: 50%;
      box-shadow: var(--shadow);
      cursor: grab;
      inline-size: 1.25rem;

      &:active {
        cursor: grabbing;
      }
    }

    &::-moz-range-thumb {
      background: var(--color-ink-inverted);
      block-size: 1.25rem;
      border: 2px solid var(--color-ink);
      border-radius: 50%;
      box-shadow: var(--shadow);
      cursor: grab;
      inline-size: 1.25rem;

      &:active {
        cursor: grabbing;
      }
    }

    &:focus {
      outline: 2px solid var(--color-link);
      outline-offset: 2px;
    }
  }

  .risk-slider-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .risk-slider-value {
    font-size: var(--text-small);
    font-weight: 600;
    text-align: center;
  }

  .risk-slider-scale {
    color: var(--color-ink-dark);
    display: flex;
    font-size: var(--text-xx-small);
    justify-content: space-between;
  }
}