.skill-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}

.skill-filter {
  appearance: none;
  padding: 10px 20px;
  color: var(--text-color, #e0e0e0);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--supporting-background-color);
  border-radius: var(--border-radius);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.skill-filter:hover {
  color: var(--standout-color-ruby);
  border-color: var(--standout-color-ruby);
}

.skill-filter:active {
  color: var(--standout-color-gold);
  border-color: var(--standout-color-gold);
  transform: scale(0.97);
}

.skill-filter.is-active {
  color: var(--standout-color-gold);
  border-color: var(--standout-color-gold);
}

.skills-empty {
  display: none;
  text-align: center;
}

.skills-empty.is-visible {
  display: block;
}

.skills-empty h2 {
  margin: 0 0 8px;
}

.skills-empty p {
  margin: 0;
  color: var(--text-color-muted2);
}

@media (max-width: 600px) {
  .skill-filters {
    display: none;
  }
}