import styled from 'styled-components';
import { uiColors } from '../../constants/uiColors';

export const SingleShortcut = styled.button`
  width: 3rem;
  height: 3rem;
  background-color: ${uiColors.lightGray};
  border: 2px solid ${uiColors.darkGray};
  border-radius: 50%;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  span {
    pointer-events: none;
  }

  .mana {
    position: absolute;
    top: -5px;
    right: 0;
    font-size: 0.65rem;
    color: ${uiColors.blue};
  }

  .qty {
    position: absolute;
    top: -5px;
    right: 0;
    font-size: 0.65rem;
  }

  .magicWords {
    margin-top: 4px;
  }

  .keyboard {
    position: absolute;
    bottom: -5px;
    left: 0;
    font-size: 0.65rem;
    color: ${uiColors.yellow};
  }

  .onCooldown {
    color: ${uiColors.gray};
  }

  .cooldown {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-color: rgba(0 0 0 / 60%);
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: ${uiColors.darkYellow};
  }

  &:hover,
  &:focus {
    background-color: ${uiColors.darkGray};
  }

  &:active {
    background-color: ${uiColors.gray};
    border-color: ${uiColors.yellow};
  }

  &:disabled {
    opacity: 0.5;
  }
`;
