// =============================================================================
// Slider Styles
// (c) Mathigon
// =============================================================================


@import "../../styles/variables";

x-slider {
  /* rtl:ignore */
  margin: 20px auto 2em;
  width: calc(100% - 24px);
  max-width: 400px;
  display: block;
  position: relative;
  box-sizing: border-box;

  .bar {
    background: mix($grey, white, 40%);
    border-radius: 2px;
    height: 4px;
    position: relative;
  }

  .play + .bar { /* rtl:ignore */ margin-left: 40px; }

  .knob {
    background: $primary;
    border-radius: 12px;
    position: absolute;
    height: 20px;
    width: 20px;
    /* rtl:ignore */
    margin:  -8px 0 0 -10px;
    touch-action: pan-y;
    transition: background .2s, transform .2s, box-shadow .2s;
    cursor: grab;
    /* rtl:ignore */
    left: 0;
  }

  .knob:hover, .knob:active {
    background: lighten($primary, 10%);
    transform: scale(1.4);
    box-shadow: 0 3px 8px rgba(black, 25%);
  }

  .play {
    @include bouncy();
    cursor: pointer;
    width: 32px;
    height: 32px;
    padding: 4px;
    position: absolute;
    /* rtl:begin:ignore */
    top: -18px;
    left: -8px;
    /* rtl:end:ignore */
    color: mix($grey, white, 60%);
    transition: fill .2s, transform .2s;
    &:focus, &:hover { @include theme(color, $grey, white); transform: scale(1.2); }
    &:active { transform: scale(0.9); }
  }
}