.kolide-slider {
  transition: background-color 150ms ease-in-out;
  background-color: $text-medium;
  border-radius: 12px;
  border: 1px solid #eaeaea;
  cursor: pointer;
  display: inline-block;
  height: 22px;
  min-width: 40px;
  position: relative;
  width: 40px;
  box-shadow: inset 0 1px 6px 0 rgba(0, 0, 0, 0.2);

  &:hover {
    background-color: $text-medium;
    box-shadow: inset 0 1px 6px 0 rgba(0, 0, 0, 0.2);
  }

  &--active {
    background-color: $brand-light;

    &:hover {
      background-color: $brand-light;
    }

  }

  &__wrapper {
    display: flex;
    align-items: center;
    height: 40px;
  }

  &__dot {
    @include size(14px);
    @include position(absolute, 0 null null 5px);
    transition: left 150ms ease-in-out;
    margin-top: 3px;
    border-radius: 50%;
    background-color: $white;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25);

    &--active {
      left: 21px;
    }
  }

  &__label {
    font-size: 18px;
    font-weight: $light;
    letter-spacing: 1.3px;
    text-align: left;
    vertical-align: text-bottom;
    text-transform: uppercase;
    margin-right: 10px;
    color: $text-light;

    &--active {
      color: $brand;
      margin-right: 0;
      margin-left: 10px;
    }
  }
}