import styled, { css } from 'styled-components';
import { selectors } from '@defencedigital/design-tokens';
import { StyledEventTitle } from './StyledEventTitle';
var color = selectors.color;
export var StyledEventBar = styled.div.withConfig({
  displayName: "StyledEventBar",
  componentId: "sc-mq6gih-0"
})(["order:1;position:relative;display:inline-block;border-radius:4px;background-color:", ";height:16px;min-width:1rem;width:", ";max-width:", ";", " ", " ", ""], function (_ref) {
  var _ref$$barColor = _ref.$barColor,
    $barColor = _ref$$barColor === void 0 ? color('success', '500') : _ref$$barColor;
  return $barColor;
}, function (_ref2) {
  var $width = _ref2.$width;
  return $width;
}, function (_ref3) {
  var $maxWidth = _ref3.$maxWidth;
  return $maxWidth;
}, function (_ref4) {
  var $startsBeforeStart = _ref4.$startsBeforeStart,
    $width = _ref4.$width,
    _ref4$$barColor = _ref4.$barColor,
    $barColor = _ref4$$barColor === void 0 ? color('success', '500') : _ref4$$barColor;
  return $startsBeforeStart && css(["border-top-left-radius:unset;border-bottom-left-radius:unset;margin-left:14px;width:calc(", " - 14px);&::before{content:'';position:absolute;left:-14px;width:0;height:0;border-style:solid;border-width:8px 14px 8px 0;border-color:transparent ", " transparent transparent;}+ ", "{margin-left:14px;}"], $width, $barColor, StyledEventTitle);
}, function (_ref5) {
  var $endsAfterEnd = _ref5.$endsAfterEnd,
    $maxWidth = _ref5.$maxWidth,
    _ref5$$barColor = _ref5.$barColor,
    $barColor = _ref5$$barColor === void 0 ? color('success', '500') : _ref5$$barColor;
  return $endsAfterEnd && css(["border-top-right-radius:unset;border-bottom-right-radius:unset;max-width:calc(", " - 14px);&::after{content:'';position:absolute;right:-14px;width:0;height:0;border-style:solid;border-width:8px 0 8px 14px;border-color:transparent transparent transparent ", ";}"], $maxWidth, $barColor);
}, function (_ref6) {
  var $startsBeforeStart = _ref6.$startsBeforeStart,
    $endsAfterEnd = _ref6.$endsAfterEnd,
    $maxWidth = _ref6.$maxWidth;
  return $startsBeforeStart && $endsAfterEnd && css(["max-width:calc(", " - 28px);"], $maxWidth);
});