import styled from 'styled-components';
import { getSpacing, getColorAlias, getFontSize } from '../../../utils/index.js';
import { getBorderColor, getIconFill } from './utils.js';

const ToastWrapper = styled.div `
  display: flex;
  font-family: ${(props) => props.theme.font.familyPrimary};
  flex-direction: column;
  margin-bottom: ${getSpacing('s01')};
  padding: ${getSpacing('s04')};
  border-radius: ${getSpacing('s02')};
  background-color: ${getColorAlias('containerInverse')};
  position: relative;
  overflow: hidden;
  min-width: 300px;
  max-width: 100%;
  pointer-events: auto;
  ${getFontSize('size14')};

  &::before {
    content: '';
    height: 100%;
    width: ${getSpacing('s01')};
    background-color: ${({ variant }) => variant && getBorderColor(variant)};
    position: absolute;
    top: 0;
    left: 0;
  }

  svg {
    margin-right: ${getSpacing('s04')};
    height: calc(${getSpacing('s05')} - ${getSpacing('s01')});
    width: calc(${getSpacing('s05')} - ${getSpacing('s01')});
    fill: ${({ variant }) => variant ? getIconFill(variant) : getColorAlias('containerDefault')};
  }
`;
const CompactWrapper = styled.div `
  display: flex;
  align-items: center;
`;
const MessageWrapper = styled.span `
  ${getFontSize('size14')};
  color: ${getColorAlias('contentInverse')};
`;
const ActionWrapper = styled.div `
  display: flex;
  margin-top: ${getSpacing('s01')};
  justify-content: flex-end;
`;
const CompactActionWrapper = styled.div `
  margin-left: auto;

  button {
    margin-left: ${getSpacing('s04')};
  }
`;
const ToastCompactWrapper = styled(ToastWrapper) `
  padding: calc(${getSpacing('s04')} - 2px) ${getSpacing('s04')};
`;

export { ActionWrapper, CompactActionWrapper, CompactWrapper, MessageWrapper, ToastCompactWrapper, ToastWrapper };
