import styled, { css } from 'styled-components';
import { selectors } from '@defencedigital/design-tokens';
import { TIMELINE_BORDER_COLOR } from '../constants';
var color = selectors.color,
  spacing = selectors.spacing,
  zIndex = selectors.zIndex;
export var StyledMonth = styled.div.withConfig({
  displayName: "StyledMonth",
  componentId: "sc-hmatlq-0"
})(["position:relative;display:inline-flex;align-items:center;height:4rem;border-bottom:", " solid ", ";width:", ";&:last-of-type{border-right:none;}&:not(:last-of-type)::after{position:absolute;right:0;top:0;content:'';display:inline-block;width:1rem;height:100vh;border-right:", ";z-index:", ";}"], spacing('px'), TIMELINE_BORDER_COLOR, function (_ref) {
  var $width = _ref.$width;
  return "".concat($width, "px");
}, function (_ref2) {
  var $hasThickBorder = _ref2.$hasThickBorder;
  return $hasThickBorder ? css(["2px solid ", ""], color('neutral', '200')) : css(["", " dashed ", ""], spacing('px'), color('neutral', '200'));
}, zIndex('body', 1));