.ui-selector[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

.ui-selector__option {
  background-color: transparent;
  color: var(--primary);
  border: none;
  padding: 0.5rem 0.4rem;
  border-radius: var(--rounded-md);
  cursor: pointer;
  transition: background-color 0.2s ease-out;
  user-select: none;
}

.ui-selector__option.active {
  color: var(--light);
  pointer-events: none;
}

.ui-selector__option:hover {
  color: var(--primary-light);
  cursor: pointer;
}

.key-hints {
  text-align: center;
  color: var(--primary);
  font-size: 0.85rem;
}

kbd {
  background-color: var(--primary);
  color: var(--dark);
  padding: 0.1rem 0.2rem;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 4px;
}

.result-card {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  color: var(--light);
}

.result-card .result-card__label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primary);
}

.result-card .result-card__value,
.result-card.result-card-large {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--primary-light)
}

.result-card.result-card--large .result-card__value {
  font-size: 2.2rem;
}

.result-card.result-card--large .result-card__label {
  font-size: 1rem;
}


a, button {
  text-decoration: none;
}

.button {
  background-color: var(--primary);
  color: var(--light);
  border: 1px solid var(--primary--light);
  border-radius: var(--rounded-md);
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

.button.button--text {
  background-color: transparent;
  border: none;
}

.button:hover {
  cursor: pointer;
  background-color: var(--primary-dark);
  transition: background-color 0.2s ease-out;
}

.toolbar {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

#countdown {
  font-family: monospace;
  color: var(--primary-light);
  transition: opacity 0.2s ease-out;
  margin-bottom: 0.5rem;
  font-size: 1.2rem ;
}


.fade-out {
  animation: fadeOut 0.2s ease-in-out;
  animation-fill-mode: forwards;
}

.fade-in {
  animation: fadeIn 0.2s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}