import React from "react";
import style from "styled-components";
import { whiteBackground, purpleBase, grayDark600, grayLight400 } from "../constants";

interface CustomToastProps {
    borderColor?: string;
}

export const CustomToast = style.button<CustomToastProps>`
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    position: absolute;
    bottom: 68px;
    right: 28px;
    width: 440px;
    height: 96px;
    background-color: ${(props) => props.color || whiteBackground};
    box-shadow: 0px 2px 4px rgba(65, 40, 148, 0.2);
    border: none;
    border-top: ${(props) => (props.borderColor ? `${props.borderColor} 2px solid` : `${purpleBase} 2px solid`)};
    animation: 1s slide-up;
    @keyframes slide-up {
        from {
          bottom: -68px;
        }
        to {
          bottom: 68px;
        }
    }
    @media (max-width: 480px) {
        bottom: 44px;
        right: calc((100vw - 304px)/2);
        width: 304px;
        height: 68px;
        animation: 1s slide-up;
        @keyframes slide-up {
            from {
              bottom: -44px;
            }
            to {
              bottom: 44px;
            }
        }
    }
`;

export const ToastImg = style.img`
    @media (max-width: 480px) {
        height: 20px;
        width: 20px;
        margin: auto 0 auto 0;
    }
`;
export const ToastCloseImg = style.img`
    position: absolute;
    right: 17px;
    top: 15px;
    cursor: pointer;
    @media (max-width: 480px) {
        height: 10.5px;
        width: 10.5px;
        top: 13.75px;
    }
`;
export const ToastTextContainer = style.div`
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    margin: 0 0 0 16px;
    text-align: left;
    @media (max-width: 480px) {
        margin: 0 0 0 8px;
    }
`;
export const ToastMessage = style.div`
    font-family: 'Jost', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: ${grayDark600};
    @media (max-width: 480px) {
        font-size: 16px;
        line-height: 24px;
    }
`;
export const ToastDescription = style.div`
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: ${grayLight400};
    @media (max-width: 480px) {
        font-size: 12px;
        line-height: 20px;
    }
`;

export const FlexContainer = style.div`
    display: flex;
    margin: 24px 0 0 16px;
    @media (max-width: 480px) {
        margin: 2px 8px 0 8px;
    }
`;
