import styled from 'styled-components';
import { selectors } from '@defencedigital/design-tokens';
import { getTransitionOpacity } from '../../../../styled-components';
var color = selectors.color,
  zIndex = selectors.zIndex;
export var StyledHandle = styled.button.withConfig({
  displayName: "StyledHandle",
  componentId: "sc-3ql9qb-0"
})(["position:absolute;top:1.15rem;right:-1rem;display:inline-flex;align-items:center;justify-content:center;background-color:", ";border-radius:9999px;width:2rem;height:2rem;border:none;box-shadow:0px 1px 3px 0px rgba(0,0,0,0.25);opacity:", ";transition:100ms opacity linear;z-index:", ";&:hover{cursor:pointer;}> svg{color:", ";}"], color('action', '500'), function (_ref) {
  var $transitionStatus = _ref.$transitionStatus;
  return getTransitionOpacity($transitionStatus);
}, zIndex('sidebar', 2), color('neutral', 'white'));