@import '../assets/globals.postcss.css';

.speed-control {
  position:       relative;
  display:        inline-block;
  height:         calc( 40 * $PX );

  $pad: 20;
  &__slider {
    position:         absolute;
    bottom:           100%;
    left:             calc( 3 * $PX );
    width:            calc( 30 * $PX );
    height:           calc( (80 + 2*$pad) * $PX );
    padding-top:      calc( $pad * $PX );
    padding-bottom:   calc( $pad * $PX );

    border-top-right-radius:   $BRADIUS;
    border-top-left-radius:    $BRADIUS;

    background:       $c-purple;

    $translateSize : calc( -99999999 * $PX );
    transform:        translate($translateSize, $translateSize);
    backface-visibility: hidden;

    &:before,
    &:after {
      content:        '';
      position:       absolute;
      top:            50%;
      width:          calc( 3*$PX );
      height:         calc( $PX );
      background:     #FFF;
    }
    $shift: calc( 5*$PX );
    &:before {
      left:           $shift;
    }
    &:after {
      right:          $shift;
    }
  }
  &__button {
    border: 1px solid cyan;
  }

  &.is-on &__slider {
    transform: translate(0, 0);

  }
}