import styled from 'styled-components';
import { selectors } from '@defencedigital/design-tokens';
import { StyledContent } from '../../../../primitives/FloatingBox/partials/StyledContent';
var zIndex = selectors.zIndex,
  color = selectors.color;
export var StyledSidebar = styled.aside.withConfig({
  displayName: "StyledSidebar",
  componentId: "sc-1qt7uce-0"
})(["display:inline-flex;flex-direction:column;position:relative;z-index:", ";flex-shrink:0;width:", ";height:100vh;background-color:", ";color:", ";transition:", ";> a:hover{text-decoration:none;}", "{margin:0 0 0.5rem 0.5rem;}"], zIndex('sidebar', 0), function (_ref) {
  var isOpen = _ref.isOpen;
  return isOpen ? '18rem' : '3.75rem';
}, color('neutral', '700'), color('neutral', 'white'), function (_ref2) {
  var isOpen = _ref2.isOpen;
  return isOpen ? '200ms width cubic-bezier(0.34, 1.56, 0.64, 1)' : '200ms width cubic-bezier(0.34, 1, 0.64, 1)';
}, StyledContent);