/*
 * Copyright 2019 dialog LLC <info@dlg.im>
 */
@import '../../styles/variables.css';

:root {
  --range-font-family: var(--default-font-family);
  --range-background-color: #fff;
  --range-height: 6px;
  --range-handle-color: #fff;
  --range-handle-size: 16px;
  --range-fill-color: var(--color-primary);
}

/* Styles */
.container {
  all: initial;
  display: block;
  box-sizing: border-box;
  height: 20px;
  padding: 7px 0;
  font-family: var(--range-font-family);

  & :global(.rangeslider) {
    position: relative;

    &:hover {
      & :global(.rangeslider__fill) {
        background-color: var(--range-fill-color);
      }
    }
  }

  & :global(.rangeslider-horizontal) {
    height: var(--range-height);
    cursor: pointer;
    border-radius: calc(var(--range-height) / 2);
    background-color: var(--range-background-color);
    box-shadow: inset 0 0 0 0.5px var(--range-fill-color);
  }

  & :global(.rangeslider__fill) {
    top: 0;
    display: block;
    height: 100%;
    transition: background-color calc(var(--default-transition-duration) / 2)
      linear;
    border-radius: calc(var(--range-height) / 2) 0 0
      calc(var(--range-height) / 2);
    background-color: color-mod(var(--range-fill-color) alpha(75%));
  }

  & :global(.rangeslider__handle) {
    position: absolute;
    top: 50%;
    display: inline-block;
    width: var(--range-handle-size);
    height: var(--range-handle-size);
    cursor: pointer;
    border-radius: 1000px;
    background-color: var(--range-handle-color);
    box-shadow: inset 0 0 0 1px var(--range-fill-color);
    transform: translateZ(0) translateX(-50%) translateY(-50%);
    transition: box-shadow calc(var(--default-transition-duration) / 2) linear;
    outline: 0;

    &:active {
      box-shadow: inset 0 0 0 1.5px var(--range-fill-color);
    }
  }
}