import styled from '@emotion/styled'

export const AddMissedButton = styled.button`
  position: absolute;
  bottom: 8px;
  right: 8px;
  border: none;
  background-color: var(--chakra-colors-blue-500);
  color: white;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  opacity: 0.8;
  transition: opacity 0.3s ease, transform 0.3s ease;

  &:hover {
    cursor: pointer;
    opacity: 1;
    transform: scale(1.1);
  }
  
  .chakra-ui-dark & {
    background-color: var(--chakra-colors-blue-400);
  }
`