import styled from 'styled-components';
import { selectors } from '@defencedigital/design-tokens';
import { transparentize } from 'polished';
import { RANGE_SLIDER_HANDLE_COLOR } from '../constants';
var color = selectors.color;
export var StyledHandle = styled.div.withConfig({
  displayName: "StyledHandle",
  componentId: "sc-1ah7h11-0"
})(["position:absolute;transform:translate(-10px,-50%);width:18px;height:18px;margin-left:1px;border:none;border-radius:9999px;background-color:", ";text-align:center;transition:box-shadow 0.15s ease-in-out;cursor:pointer;box-shadow:1px 1px 2px 0px rgba(000,000,000,0.25);&:focus{box-shadow:1px 1px 2px 0px rgba(000,000,000,0.25),0px 0px 0px 5px ", ";outline:none;}"], RANGE_SLIDER_HANDLE_COLOR, transparentize(0.5, color('action', '200')));