.color::after,
.color-icon,
.color-palette,
.color-text::after {
  transition: opacity 300ms ease-in-out;
}

.color-circle {
  transition: background-color 300ms ease-in-out;
}

.color::after {
  @apply absolute inset-0 border-2 rounded-full opacity-0 pointer-events-none;
  content: '';
  border-color: rgba(255, 255, 255, 0.5);
}

.color-palette-inner {
  transform: translateY(0.4rem);
  transition: transform 300ms ease-in-out;
}

.is-active .color-palette-inner {
  transform: translateY(0.9rem);
}

.color-palette-inner::before,
.color-palette-inner::after {
  @apply .absolute .block .text-white .text-xl .leading-none pointer-events-none;
  content: '▲';
  left: 0;
  transform: scale(1, 0.5);
  font-size: 2rem;
}

.color-palette-inner::before {
  top: -1.375rem;
  z-index: -1;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.color-palette-inner::after {
  top: -1.4rem;
}

.color-text::after {
  @apply absolute inset-0 border border-border-line-purple rounded-full opacity-0 pointer-events-none;
  content: '';
}

.color:hover::after,
.is-active .color::after,
.color:hover > .color-icon,
.is-active .color-icon {
  @apply opacity-100;
}

.color-input:checked + .color-text::after {
  @apply opacity-100;
}