@use 'sass:math'

.Formol_Field--type-range
  .Formol_Field
    &--focus
      color: $formol-color-action

    &__element
      background-color: transparent
      color: inherit


.Formol_RangeField
  align-items: center
  display: flex
  margin: $formol-field-margin 0 calc(#{$formol-field-margin} + 1.5em)

  &__range
    border: 0
    padding: 0

  &__value-wrapper
    color: inherit
    margin: 0 .5em
    position: relative
    transition: color .25s

  &__value
    left: 0
    text-align: center
    top: 100%
    width: 100%
    position: absolute

  &__min, &__max
    font-size: math.div($formol-font-size, 1.25)