import styled from 'styled-components';
import { ToastProps } from './interfaces';

export const StyledToast = styled.div<ToastProps>`
  display: grid;
  grid-template-columns: min-content auto min-content;
  align-items: center;
  border-radius: 8px;
  padding: 24px;
  position: relative;
  overflow: hidden;

  background: ${({ theme, variant }) => {
    switch (variant) {
      case 'dark':
        return theme.colors.neutral[900];
      case 'brand':
        return theme.colors.primary[100];
      case 'error':
        return theme.colors.error[100];
      case 'light':
      default:
        return theme.colors.neutral[0];
    }
  }};

  border: ${({ theme, variant }) => {
    switch (variant) {
      case 'brand':
        return `1px solid ${theme.colors.primary[700]}`;
      case 'error':
        return `1px solid ${theme.colors.error[700]}`;
      case 'dark':
      case 'light':
      default:
        return 'none';
    }
  }};

  svg {
    margin-right: 24px;
  }

  button {
    margin-left: 24px;
  }

  ${({ width }) =>
    width &&
    `
			width: ${width}px;
		`};

  ${({ height }) =>
    height &&
    `
		height: ${height}px;
	`};
`;

export const RainbowTopBar = styled.div`
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    #dcf31c 0%,
    #ff97c9 20.6%,
    #33657b 53.41%,
    #dcf31c 82.58%,
    #b269e1 100%
  );
`;

export const ToastBody = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
`;