.root {
  @apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
  items-center justify-center cursor-pointer transition duration-150 ease-in-out
  p-0 shadow-none border-gray-200 border box-border;

  & > span {
    @apply absolute;
  }

  &:hover {
    @apply transform scale-110 bg-hover;
  }
}

.color {
  @apply text-black transition duration-150 ease-in-out;

  &:hover {
    @apply text-black;
  }

  &.dark,
  &.dark:hover {
    color: white !important;
  }
}

.active {
  &.size {
    @apply border-accents-9 border-2;
  }
}