import styled, { css } from 'styled-components';
import { selectors } from '@defencedigital/design-tokens';
import { SheetButton } from '../../Sheet/SheetButton';
import { StyledNotificationDot } from './StyledNotificationDot';
import { StyledNotificationsLabel } from './StyledNotificationsLabel';
var spacing = selectors.spacing,
  color = selectors.color;
export var StyledNotificationsSheetButton = styled(SheetButton).withConfig({
  displayName: "StyledNotificationsSheetButton",
  componentId: "sc-udm6wd-0"
})(["display:flex;align-items:center;padding:", ";margin-bottom:", ";white-space:nowrap;svg{color:", ";width:20px;height:20px;}", ""], spacing('3'), spacing('5'), color('neutral', '100'), function (_ref) {
  var isOpen = _ref.isOpen;
  return isOpen && css(["width:100%;padding:", " ", ";margin:unset;svg{width:1.5rem;margin-left:", ";}&::before{position:absolute;top:1rem;left:2rem;content:'';width:12px;height:12px;background-color:", ";border-radius:9999px;border:2px solid ", ";}", "{position:relative;top:unset;right:unset;order:3;width:25px;height:25px;}", "{display:inline-block;}"], spacing('8'), spacing('7'), spacing('2'), color('danger', '600'), color('neutral', '700'), StyledNotificationDot, StyledNotificationsLabel);
});