@use "@infineon/design-system-tokens/dist/tokens";

// Label
// 
.form-label {
  line-height: normal;

  &.ifx--disabled {
    color: $disabled-color;
  }
}

// Text
//
.form-text {
  
  &.ifx--disabled {
    color: $disabled-color;
  }
}

.valid-feedback {
  color: $body-color;
}

// Form Control
//
.form-control {
  &:valid:focus,
  &.is-valid:focus {
    border-color: $input-border-color;
    box-shadow: $input-btn-focus-box-shadow;
  }
  
  &:invalid:focus,
  &.is-invalid:focus {
    border-color: $input-border-color;
    box-shadow: $input-btn-focus-box-shadow;
  }

  &:disabled {
    &,
    &::placeholder {
      color: $disabled-color;
    }
  }
}








input[type=range] {
  -webkit-appearance: none;
}

input[type=range]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background-color: tokens.$color-default-500;
}

input[type=range]::-moz-range-thumb:active {
  background-color: tokens.$color-default-700;
}

input[type=range]:focus::-moz-range-thumb {
  box-shadow: 0 0 0 3px #59B29B66;
}

input[type=range]::-moz-range-track {
  height: 5px;
  background-color: tokens.$color-gray-200;
  border-radius: 1px;
}

input[type=range]::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  background-color: tokens.$color-default-500;
}

input[type=range]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px #59B29B66;
}

input[type=range]::-webkit-slider-thumb:active {
  background-color: tokens.$color-default-700;
  box-shadow: 0 0 0 3px #59B29B66;
}

input[type=range]::-webkit-slider-runnable-track {
  height: 5px;
  background-color: tokens.$color-gray-200;
  border-radius: 1px;
}