@use 'src/styles/abstracts' as *;

.SliderWithInput {
  display: flex;
  align-items: center;
  height: 100%;
  max-width: toRem(520px);
  width: 100%;
  &__densityWrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    &__densityField {
      width: 5.375rem;
      height: 1.25rem;
      border: 0.0625rem solid $cuddle-70;
      border-radius: $border-radius-xss;
      font-size: 0.625rem;
      font-weight: $font-600;
      color: $pico-80;
      padding-left: 0.375rem;
      /* Chrome, Safari, Edge, Opera */
      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }

      /* Firefox */
      &[type='number'] {
        -moz-appearance: textfield;
      }
      &:focus-visible {
        outline: unset;
      }
    }
    &__densityTitleBox {
      display: flex;
      &__labelTooltip {
        background-color: $pico-70;
        width: 0.6875rem;
        height: 0.6875rem;
        color: $white;
        font-size: 0.4375rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: $border-radius-circle;
        margin-top: 0.0625rem;
        cursor: pointer;
      }
      &__densityFieldLabel {
        margin-right: 0.16rem;
        min-width: 4.4rem;
        margin-bottom: 0.1875rem;
      }
    }
  }
  &__sliderWrapper {
    max-width: 24.875rem;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: 2rem;
    padding-bottom: toRem(8px);
    .Slider {
      padding-bottom: toRem(3px);
    }
    &__sliderTitleBox {
      line-height: toRem(18px);
    }
    &__title {
      margin-right: 0.25rem;
      font-size: $text-xxs;
      font-weight: $font-400;
      color: $pico-70;
    }
    &__sliderValuesLabel {
      width: 4.875rem;
      margin-right: 0.5rem;
    }
  }
}
