import styled from "@emotion/styled";
import { css } from "@emotion/react";
import { StyledSnackbarProps } from "./Snackbar";

const StyledSnackbar = styled.div<StyledSnackbarProps>`
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 1.5rem;
  font-size: 1rem;
  border-radius: 5px;
  font-weight: 600;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  grid-gap: 0.5rem;

  ${({ variant }) => {
    return (
      variant === "success" &&
      css`
        background-color: hsl(135, 94%, 85%);
        color: hsl(135, 94%, 25%);
      `
    );
  }}

  ${({ variant }) => {
    return (
      variant === "error" &&
      css`
        background-color: hsl(0, 94%, 90%);
        color: hsl(0, 94%, 56%);
      `
    );
  }}
`;

export default StyledSnackbar;