import styled, { css } from 'styled-components';
import { selectors } from '@defencedigital/design-tokens';
var color = selectors.color,
  zIndex = selectors.zIndex;
export var StyledDrawer = styled.div.withConfig({
  displayName: "StyledDrawer",
  componentId: "sc-1007dyi-0"
})(["position:fixed;top:0;right:0;width:280px;height:100%;z-index:", ";overflow:hidden;background-color:", ";box-shadow:inset 1px 0px 0px 0px rgb(226,233,238),-1px 0px 3px 0px rgba(0,0,0,0.04);margin-right:-280px;transition:ease-in-out margin-right 0.3s;", ""], zIndex('overlay', 1), color('neutral', 'white'), function (_ref) {
  var $isOpen = _ref.$isOpen;
  return $isOpen && css(["margin-right:0;transition:ease-in-out margin-right 0.3s;"]);
});