import styled from 'styled-components';
import { ITheme, ThemeDefault } from '../../../types/theme.interface';

const css = styled.div;

export default css<ITheme>`
   width: 100%;
   max-width: 450px;

   @keyframes pulse {
      from {
         opacity: 0;
      }

      to {
         opacity: 1;
      }
   }

   @keyframes pulse-out {
      from {
         opacity: 1;
      }

      to {
         opacity: 0;
      }
   }

   .ds-toast-container {
      color: #fff;
      padding: 9px 20px;
      border: none;
      letter-spacing: 0.3px;
      transition: all 400ms;
      opacity: 0;
      font-weight: 500;
      margin-bottom: 9px;
      box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%);
      background-color: #333;
      color: hsla(0, 0%, 100%, 0.87);
      border-radius: 4px;

      &.opening {
         transition: all 1ms;
         animation-name: pulse;
         animation-timing-function: ease-in-out;
         animation-duration: 400ms; /* don't forget to set a duration! */
         opacity: 1;
      }

      &.closing {
         animation-name: pulse-out;
         animation-timing-function: ease-in-out;
         animation-duration: 400ms; /* don't forget to set a duration! */
      }

      &.error {
         background: ${(p) => p.theme?.danger ?? ThemeDefault.danger};
         color: ${(p) => p.theme?.dangerTexTextInside ?? ThemeDefault.dangerTextInside};
      }

      &.danger {
         background: ${(p) => p.theme?.danger ?? ThemeDefault.danger};
         color: ${(p) => p.theme?.dangerTexTextInside ?? ThemeDefault.dangerTextInside};
      }

      &.warning {
         background: ${(p) => p.theme?.warning ?? ThemeDefault.warning};
         color: ${(p) => p.theme?.warningTexTextInside ?? ThemeDefault.warningTextInside};
      }

      &.success {
         background: ${(p) => p.theme?.success ?? ThemeDefault.success};
         color: ${(p) => p.theme?.successTexTextInside ?? ThemeDefault.successTextInside};
      }
   }

   .ds-toast {
      display: flex;
      justify-content: center;
      align-self: center;
      align-items: center;
   }

   .close {
      flex: 0;
      text-align: right;
      padding: 5px;
      padding-left: 10px;
      cursor: pointer;
   }

   .message {
      font-size: 13px;
      font-weight: 400;
      flex: 1;
   }
`;
