/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
@import "../style/themecolors";
@import "../button/button";
@import "../z-index";

$uicore-slider-height:          24px;
$uicore-slider-rail-height:     4px;
$uicore-slider-handle-size:     14px;
$uicore-slider-minmax-margin:   6px;

.core-slider-container {
  position: relative;
  height: $uicore-slider-height;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;

  span.uicore-text-body[data-testid="core-slider-min"] {
    margin-right: 4px;
  }

  &.core-slider-tickLabels {
    margin-bottom: 9px;
  }

  &.core.slider-includeTicksInWidth {
    margin-right: 10px;
  }

  .core-slider-minMax {
    margin-left: $uicore-slider-minmax-margin;
    margin-right: $uicore-slider-minmax-margin;
  }

  .core-slider {
    flex: 1;
    position: relative;

    .core-slider-rail {
      position: absolute;
      display: flex;
      align-items: center;
      width: 100%;
      height: $uicore-slider-rail-height;
      padding: 4px 0;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;

      >.core-slider-rail-inner {
        height: $uicore-slider-rail-height;
        width: 100%;
        background: $buic-background-5;
      }
    }

    .core-slider-track {
      position: absolute;
      display: flex;
      align-items: center;
      top: 50%;
      transform: translateY(-50%);
      height: $uicore-slider-rail-height;
      padding: 4px 0;
      cursor: pointer;

      >.core-slider-track-inner {
        height: $uicore-slider-rail-height;
        width: 100%;
        background: $buic-foreground-primary;
      }
    }

    .core-slider-handle {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: $uicore-slider-handle-size;
      height: $uicore-slider-handle-size;
      cursor: pointer;
      border-radius: 50%;
      border-width: 1px;
      border-style: solid;
      border-color: $buic-background-control-stroke;
      background: $buic-background-control;
      box-sizing: border-box;
      outline: none;
      padding: 0;

      &:hover:not(.core-disabled) {
        border-color: $buic-foreground-focus;
      }

      &:focus, &:active {
        @include uicore-buttons-button-focused;
      }
    }

    .core-slider-tick-mark {
      position: absolute;
      top: 5px;
      width: 1px;
      height: 5px;
      background-color: $buic-foreground-disabled;
    }

    .core-slider-tick-label {
      position: absolute;
      top: 10px;
      font-size: 10px;
      text-align: center;
      color: $buic-foreground-body;
    }
  }

  &.core-disabled {
    cursor: not-allowed;

    .core-slider {
      .core-slider-rail {
        cursor: not-allowed;
      }

      .core-slider-track {
        cursor: not-allowed;

        >.core-slider-track-inner {
          background: $buic-foreground-disabled;
        }
      }

      .core-slider-handle {
        background: $buic-background-control-disabled;
        border-color: $buic-background-control-stroke-disabled;
        cursor: not-allowed;
      }

      .core-slider-tick-mark {
        opacity: $uicore-opacity-disabled;
      }

      .core-slider-tick-label {
        color: $buic-foreground-disabled;
      }
    }

    .uicore-text-body {
      color: $buic-foreground-disabled;
    }

    .icon {
      color: $buic-foreground-disabled;
    }
  }
}

.core-slider_track-tooltip-container {
  position: absolute;
  left: 0;
  top: 0;
}