import styled, { css } from 'styled-components';
import { selectors } from '@defencedigital/design-tokens';
var animation = selectors.animation,
  color = selectors.color,
  spacing = selectors.spacing;
export var StyledAction = styled.span.withConfig({
  displayName: "StyledAction",
  componentId: "sc-btv6q-0"
})(["display:none;", " ", ""], function (_ref) {
  var $isCollapsible = _ref.$isCollapsible;
  return $isCollapsible && css(["border-radius:3px;padding:", ";display:flex;align-items:center;justify-content:center;background:", ";transition:background-color ", ";svg{transition:transform ", ";}"], spacing('2'), color('neutral', '100'), animation('default'), animation('default'));
}, function (_ref2) {
  var $isCollapsible = _ref2.$isCollapsible,
    $isOpen = _ref2.$isOpen;
  return $isCollapsible && $isOpen && css(["svg{transform:rotate(180deg);}"]);
});