import styled from '@emotion/styled'
import { css, keyframes } from '@emotion/react'

export const Avatar = styled.img`
  width: 96px;
  height: 96px;
  margin: 0 auto;
  border-radius: 6px;
`

export const Wrapper = styled.div<{ warn?: boolean; width?: string | number }>`
  list-style: none;
  background-color: #ffffff;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 2px 2px 6px #0000005c;
  transition: all 0.5;
  position: relative;
  width: 180px;
  min-height: 190px;
  max-height: 200px;
  margin-right: 12px;
  padding-bottom: 22px;
  ${({ width }) =>
    width
      ? css`
          width: ${width};
        `
      : ''}

  ${(props) =>
    props.warn
      ? css`
          background-color: #000000;
          opacity: 0.7;
          color: #e4e4e4;
        `
      : ''}
`

export const AddMissedButton = styled.button`
  position: absolute;
  bottom: 8px;
  right: 12px;
  border: none;
  background-color: #00000000;
  opacity: 0.2;

  :hover {
    cursor: pointer;
    opacity: 1;
  }
`