.sui-a-form-range {
  width: 100%;
  padding: $sui-space-md 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  max-width: rem(600);
  position: relative;

  &.as--inline {
    display: inline-flex;
  }

  &__label,
  &__value {
    display: block;
    border-radius: $sui-border-radius-sm;
    text-align: center;
    padding: 0 $sui-space-xs;
    font-size: $sui-font-size-ms;
    flex: none;
  }

  &__label {
    background-color: $sui-color-brand-denim-300;
    position: relative;

    // Arrow
    &::after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      color: $sui-color-brand-denim-300;
      border: rem(5) solid transparent;
      margin-top: rem(-5);
      top: 50%;
    }

    &.as--before {
      margin-right: $sui-space-sm;
      order: -1;

      &::after {
        border-left-color: currentColor;
        left: 100%;
      }
    }

    &.as--after {
      margin-left: $sui-space-sm;
      order: 1;

      &::after {
        border-right-color: currentColor;
        right: 100%;
      }
    }
  }

  &__container {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  &__wrapper {
    position: relative;
    flex: 1;
    top: -$sui-space-xs;
    order: -1;
  }

  &__value {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, -$sui-space-md);
    white-space: nowrap;

    @include suiFormRangeValueColor($sui-color-brand-denim, $sui-color-brand-denim-200);

    &.as--position-dynamic {
      left: 0%;
      transform: translate(-50%, 0);

      // Arrow
      &::after {
        top: 100%;
        left: 50%;
        transform: translate(-50%);
        border: solid transparent;
        content: "";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-top-color: $sui-color-brand-denim;
        border-width: rem(5);
        margin-left: -rem(5);
      }
    }
  }

  input {
    @include suiFormRangeStructure();
    @include suiFormRangeColor($sui-color-brand-denim );
  }

  // Primary
  &.as--primary input {
    @include suiFormRangeColor($sui-color-primary);
  }

  &.as--primary &__value {
    @include suiFormRangeValueColor($sui-color-primary, $sui-color-brand-denim-200);
  }

  &.as--primary &__value::after {
    border-top-color: $sui-color-primary;
  }

  // Success
  &.as--success input {
    @include suiFormRangeColor($sui-color-success);
  }

  &.as--success &__value {
    @include suiFormRangeValueColor($sui-color-success, $sui-color-brand-denim-200);
  }

  &.as--success &__value::after {
    border-top-color: $sui-color-success;
  }

  // Warning
  &.as--warning input {
    @include suiFormRangeColor($sui-color-warning);
  }

  &.as--warning &__value {
    @include suiFormRangeValueColor($sui-color-warning, $sui-color-brand-denim-200);
  }

  &.as--warning &__value::after {
    border-top-color: $sui-color-warning;
  }

  // Danger
  &.as--danger input {
    @include suiFormRangeColor($sui-color-danger);
  }

  &.as--danger &__value {
    @include suiFormRangeValueColor($sui-color-danger, $sui-color-brand-denim-200);
  }

  &.as--danger &__value::after {
    border-top-color: $sui-color-danger;
  }

  // Disabled
  & input:disabled {
    @include suiFormRangeDisabled();
  }

  & input:disabled ~ &__value {
    @include suiFormRangeValueColor($sui-color-brand-denim-300, $sui-color-text-light);
  }

  & input:disabled ~ &__value::after {
    border-top-color: $sui-color-brand-denim-300;
  }

  & input:disabled ~ &__label {
    color: $sui-color-text-light;
  }

  & input:disabled ~ &__wrapper > &__value {
    @include suiFormRangeValueColor($sui-color-brand-denim-300, $sui-color-text-light);
  }

  & input:disabled ~ &__wrapper > &__value::after {
    border-top-color: $sui-color-brand-denim-300;
  }
}
