import styled, { css } from 'styled-components';
import { selectors } from '@defencedigital/design-tokens';
import { StyledAction } from './StyledAction';
var animation = selectors.animation,
  color = selectors.color,
  spacing = selectors.spacing;
export var StyledHeader = styled.button.withConfig({
  displayName: "StyledHeader",
  componentId: "sc-gwr2el-0"
})(["position:relative;padding:", " ", " ", " ", ";display:flex;align-items:center;justify-content:space-between;width:100%;border:none;pointer-events:none;z-index:1;", ""], spacing('3'), spacing('0'), spacing('3'), spacing('2'), function (_ref) {
  var $isCollapsible = _ref.$isCollapsible;
  return $isCollapsible && css(["padding:", " ", " ", " ", ";background-color:", ";border-bottom:1px solid ", ";transition:color ", ";cursor:pointer;outline:none;pointer-events:all;&:hover{background-color:", ";", "{background-color:", ";}}"], spacing('3'), spacing('2'), spacing('3'), spacing('2'), color('neutral', 'white'), color('neutral', '100'), animation('default'), color('neutral', '000'), StyledAction, color('neutral', '200'));
});