import styled, { css } from 'styled-components';
import { selectors } from '@defencedigital/design-tokens';
import { StyledToastLabel } from './StyledToastLabel';
var shadow = selectors.shadow,
  color = selectors.color,
  spacing = selectors.spacing;
var colors = {
  success: color('success', '500'),
  error: color('danger', '500'),
  warning: color('warning', '500'),
  info: color('action', '500')
};
var translateOriginMap = {
  'top-left': 'left',
  'bottom-left': 'left',
  'top-right': 'right',
  'bottom-right': 'right',
  'top-center': 'top',
  'bottom-center': 'bottom'
};
var translateMap = {
  right: 'translate3d(120%, 0, 0)',
  left: 'translate3d(-120%, 0, 0)',
  bottom: 'translate3d(0, 120%, 0)',
  top: 'translate3d(0, -120%, 0)'
};
export var StyledToast = styled.div.withConfig({
  displayName: "StyledToast",
  componentId: "sc-qib813-0"
})(["box-shadow:", ";display:flex;flex-direction:column;border:1px solid ", ";border-radius:4px;width:340px;margin-bottom:", ";background-color:", ";transition:transform ", "ms cubic-bezier(0.2,0,0,1),opacity ", "ms;", " ", " ", ""], shadow('2'), color('neutral', '100'), spacing('6'), color('neutral', 'white'), function (_ref) {
  var $transitionDuration = _ref.$transitionDuration;
  return $transitionDuration;
}, function (_ref2) {
  var $transitionDuration = _ref2.$transitionDuration;
  return $transitionDuration;
}, function (_ref3) {
  var $appearance = _ref3.$appearance;
  return css(["", " > svg{color:", ";}"], StyledToastLabel, colors[$appearance]);
}, function (_ref4) {
  var $placement = _ref4.$placement,
    $transitionState = _ref4.$transitionState;
  return $transitionState === 'entering' && css(["transform:", ";"], translateMap[translateOriginMap[$placement]]);
}, function (_ref5) {
  var $transitionState = _ref5.$transitionState;
  return $transitionState === 'entered' && css(["transform:translate3d(0,0,0);"]);
});