.root:focus {
  outline: none;
}

.icon {
  transition: color 150ms ease-in, transform 150ms ease-in;
  display: inline-block;
  width: 1em;
  height: 1em;
}

.dark,
.dark:hover,
.dark:focus {
  color: rgba(0, 0, 0, 0.25);
}

.light,
.light:focus {
  color: rgba(255, 255, 255, 0.25);
}

.dark:hover {
  color: rgba(0, 0, 0, 0.75);
}

.light:hover {
  color: rgba(255, 255, 255, 0.75);
}

.icon svg {
  stroke-width: 3px;
}

.dark .icon svg {
  stroke: var(--color-white);
}

.light .icon svg {
  stroke: transparent;
}

.root:active .icon,
.root:active .active,
.root:focus .icon {
  transform: scale(0.9);
}

.active {
  color: var(--color-red);
  animation-name: fillIn;
  animation-duration: 350ms;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0, 1.384, 0.531, 1.417);
  animation-iteration-count: 1;
}

@keyframes fillIn {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }

  100% {
    transform: scale(1);
  }
}