/* -------------------------------------------- */
/* ############### 4.20 Toggles ############### */
/* -------------------------------------------- */

.br-toggle {
  width: 56px;
  height: 25px;
  background-color: rgba(#000, .3);
  display: inline-block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  @include border-radius();
  @include transition($transition-base);

  &.on {
    background-color: darken($br-primary, 5%);

    .br-toggle-switch { left: 35px; }
  }

  // use only for displaying demo
  + .br-toggle { margin-left: 5px; }
}

.br-toggle-rounded {
  @include border-radius(25px);

  .br-toggle-switch {
    @include border-radius(100%);
    &::before { left: -23px; }
    &::after { right: -27px; }
  }
}

.br-toggle-switch {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: 18px;
  background-color: #fff;
  @include border-radius(2px);
  @include transition($transition-base);

  &::before,
  &::after {
    position: absolute;
    top: 2px;
    color: #fff;
    text-transform: uppercase;
    font-family: $font-family-roboto;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1px;
    text-shadow: 1px 1px rgba($gray-900, .1);
  }

  &::before {
    content: 'on';
    left: -25px;
  }

  &::after {
    content: 'off';
    right: -28px;
  }
}

.br-toggle-primary.on { background-color: $blue; }
.br-toggle-success.on { background-color: $green; }
.br-toggle-warning.on { background-color: $yellow; }
.br-toggle-danger.on { background-color: $red; }
.br-toggle-info.on { background-color: $cyan; }
