.slidertabs {
  // --------------------------------------------------
  // Numbers
  // --------------------------------------------------
  &__number-container {
    min-height: 2.5rem;
    font-family: @title-family;
  }

  &__number,
  &__number-selection,
  &__number-model-answer {
    height: 2.5rem;
    width: 10rem;
    line-height: 2.5;
    text-align: center;
    border-radius: 50%;
    font-weight: @font-weight-bold;
    color: @instructional-text;
  }

  &__widget:not(.is-disabled) .slider__number {
    cursor: pointer;
  }

  &__number-model-answer {
    background-color: @item-color;
    color: @item-color-inverted;
    z-index: 10;
  }
  // --------------------------------------------------

  // --------------------------------------------------
  // Scale
  // --------------------------------------------------
  &__scale-container {
    margin-top: -3rem;
    background-color: lighten(@black, 75%);
    height: 0;
  }

  &__scale-notch {
    background-color: @disabled;
    position: absolute;
    top: -5px;
    height: 1.75rem;
    width: 1.75rem;
    background-image: none;
    border: 0;
    border-radius: 50%;
    .transform(translateX(-50%));

    &.passed {
      background-color: @item-color;
    }
  }

  .inrange {
    background-color: @item-color;
  }
  // --------------------------------------------------

  // --------------------------------------------------
  // Slider bar
  // --------------------------------------------------
  &__item {
    margin-bottom: @item-margin * 4;
  }
  // --------------------------------------------------
}

// --------------------------------------------------
// Rangeslider
// --------------------------------------------------
.rangeslider {
  background-color: @disabled;

  &--horizontal {
    box-shadow: none;
    height: 1rem;
  }

  &__fill {
    background-color: @item-color;
    box-shadow: none;
  }

  &__handle {
    background-image: none;
    border: 0;
    box-shadow: 0 2px 5px fade(@black, 30%);
    height: 1.75rem;
    width: 1.75rem;
  }

  &__handle:after {
    background-image: none;
  }

  &--horizontal .rangeslider__handle {
    top: -0.4rem;
    height: 1.9rem;
    width: 1.9rem;
    margin-left: -1px;
  }
}

// --------------------------------------------------
// Rangeslider focus styles
// --------------------------------------------------
input[type='range']:focus + .rangeslider .rangeslider__handle {
  html:not(.a11y-disable-focusoutline) & {
    box-shadow: 0 2px 5px fade(@black, 60%);
    outline: 3px solid @item-color;
    outline-offset: 3px;
  }

  html.a11y-disable-focusoutline & {
    box-shadow: 0 2px 5px fade(@black, 30%);
  }
}
// --------------------------------------------------

.slidertabs {
  &__content {
    border: 1px solid @v2-border;
    box-shadow: none;
    z-index: 1;
    box-shadow: none;
    border-radius: @item-border-radius;

    .tabs__content-item-title {
      color: @instructional-text;
    }

    .tabs__content-item-graphic {
      margin: 1rem 0;
    }
  }

  .tabs__nav-item-btn-inner {
    text-align: center;
  }

  .tabs__nav-item-btn {
    position: relative;
    background-color: transparent !important;
    color: @font-color;

    .no-touch &:not(.is-selected):hover {
      background-color: transparent !important;
      color: @font-color;
      -webkit-box-shadow: 0 3px 10px 1px rgba(153,153,153,0.3);
      -moz-box-shadow: 0 3px 10px 1px rgba(153,153,153,0.3);
      box-shadow: 0 3px 10px 1px rgba(153,153,153,0.3);
    }

    &.is-selected {
      border-top: @item-border-radius solid @primary-color;
      color: @instructional-text;
      border-radius: @item-border-radius;
      -webkit-box-shadow: 0 3px 10px 1px rgba(153,153,153,0.3);
      -moz-box-shadow: 0 3px 10px 1px rgba(153,153,153,0.3);
      box-shadow: 0 3px 10px 1px rgba(153,153,153,0.3);
    }

    .tabs__item-icon {

        .icon {
            background-image: url('assets/icon_accordion_default.svg');
            width: @icon-size;
            height: @icon-size;
            margin: 1rem auto;
  
            &:before {
              display: none !important;
            }
        }

        .dir-rtl & {
          right: inherit;
          left: @item-padding;
        }
      }
  }
  .slidertabs__number, .slidertabs__number-selection, .slidertabs__number-model-answer {
    width: 5rem;
  }
}

/* These fix the slider tabs component */

.slidertabs__number:last-child {
    text-align:center
}
.slidertabs__number:first-child {
    text-align:center
}
.slidertabs__number, .slidertabs__number-selection, .slidertabs__number-model-answer {
    line-height: 1;
}
.slidertabs__item {
    margin-top: 1rem;
}
.slidertabs__number, .slidertabs__number-selection, .slidertabs__number-model-answer {
        width: 5rem;
}
.slidertabs__number {
    font-weight: 400;
}
button.tabs__nav-item-btn {
    font-weight: 400;
}
.slider__number {
    font-weight: 400;
}
