libs/barista-components/chart/src/range/range.scss
@import '../../../core/src/style/variables';
@import '../../../core/src/style/interactive-common';

$range-handle-border-width: 3px;
$range-color: $turquoise-600;
$range-invalid-color: $gray-300;

:host {
  position: absolute;
  width: 100%;
  height: 100%;
}

.dt-chart-range-container {
  display: flex;
  left: 0;
  height: 100%;
  justify-content: space-between;
  position: absolute;
  opacity: 0;

  &:focus {
    @include dt-focus-style();
  }
}

.dt-chart-selected-area {
  width: 100%;
  height: 100%;
  background-color: rgba($color: $range-color, $alpha: 0.25);
  pointer-events: none;

  :host.dt-chart-range-invalid & {
    background-color: rgba($color: $range-invalid-color, $alpha: 0.45);
  }
}

.dt-chart-right-handle,
.dt-chart-left-handle {
  width: $range-handle-border-width;
  // in case, that the flex container shrinks it sometimes to 2px
  min-width: $range-handle-border-width;
  padding: 0;
  border: none;
  height: 100%;
  background-color: $range-color;
  pointer-events: all;
  position: relative;
  cursor: col-resize;

  dt-icon {
    width: 32px;
    height: 32px;
    opacity: 0;
    position: absolute;
    right: -9px;
    top: 0%;
    transform: translateY(-50%) scaleX(-1);

    :host.dt-chart-range-released & {
      transition: opacity 400ms ease-out;
      opacity: 1;
      top: 50%;
    }
  }

  &:focus {
    @include dt-focus-style();
  }
}

// tweaked focus style for our arrows
.dt-chart-range-container:focus,
.dt-chart-right-handle:focus,
.dt-chart-left-handle:focus {
  dt-icon::before,
  dt-icon::after {
    content: '';
    position: absolute;
    width: 17px;
    height: $focus-outline-width;
    background: $focuscolor;
    right: 6px;
  }

  dt-icon::before {
    top: 9px;
    transform: rotate(53deg);
  }

  dt-icon::after {
    bottom: 9px;
    transform: rotate(-53deg);
  }
}

.dt-chart-right-handle dt-icon {
  transform: translateY(-50%);
  left: -9px;
}

:host ::ng-deep svg {
  fill: $range-color;
}
