.lbaic-settings-dual-range {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 'dual-range-min dual-range-max';

  &-input {
    &[type='range'] {
      width: 100%;
      height: 100%;
      background-color: transparent;
      appearance: none;
      cursor: pointer;

      &::-webkit-slider-runnable-track {
        height: 4px;
        background-color: var(--lbaic-settings-dual-range-track-bg);
        background-image: linear-gradient(to right, var(--lbaic-settings-dual-range-track-active-bg) 0%, var(--lbaic-settings-dual-range-track-active-bg) 100%);
        background-size: var(--lbaic-settings-dual-range-value) 100%;
        background-repeat: no-repeat;
        border-radius: var(--lbaic-settings-dual-range-track-radius);
      }

      &::-webkit-slider-thumb {
        width: 28px;
        height: 28px;
        margin-top: -12px;
        background-color: var(--lbaic-settings-dual-range-thumb-bg);
        border-radius: 50%;
        box-shadow: var(--lbaic-settings-dual-range-thumb-shadow);
        appearance: none;
      }

      &:focus {
        outline: none;

        &::-webkit-slider-thumb {
          outline: none;
        }
      }

      &::-moz-range-track {
        height: 4px;
        background-color: var(--lbaic-settings-dual-range-track-bg);
        background-image: linear-gradient(to right, var(--lbaic-settings-dual-range-track-active-bg) 0%, var(--lbaic-settings-dual-range-track-active-bg) 100%);
        background-size: var(--lbaic-settings-dual-range-value) 100%;
        background-repeat: no-repeat;
        border-radius: var(--lbaic-settings-dual-range-track-radius);
      }

      &::-moz-range-thumb {
        width: 28px;
        height: 28px;
        background-color: var(--lbaic-settings-dual-range-thumb-bg);
        border-radius: 50%;
        box-shadow: var(--lbaic-settings-dual-range-thumb-shadow);
      }

      &:focus::-moz-range-thumb {
        outline: none;
      }
    }

    &-min {
      --lbaic-settings-dual-range-track-bg: var(--lbaic-settings-dual-range-default-bg);
      --lbaic-settings-dual-range-track-active-bg: var(--lbaic-settings-dual-range-active-bg);
      --lbaic-settings-dual-range-track-radius: 0 2px 2px 0;
      --lbaic-settings-dual-range-value: var(--lbaic-settings-dual-range-min-value);

      grid-area: dual-range-min;
      transform: scaleX(-1);
    }

    &-max {
      --lbaic-settings-dual-range-track-bg: var(--lbaic-settings-dual-range-default-bg);
      --lbaic-settings-dual-range-track-active-bg: var(--lbaic-settings-dual-range-active-bg);
      --lbaic-settings-dual-range-track-radius: 0 2px 2px 0;
      --lbaic-settings-dual-range-value: var(--lbaic-settings-dual-range-max-value);

      grid-area: dual-range-max;
    }
  }
}