.zeero-button {
  padding: 0.3em;
  border-radius: 5px;
  font-size: 0.8rem;
  width: fit-content;
  text-align: center;
  cursor: pointer;
  transition: filter 0.2s, background 0.3s;
}

.zeero-button.xs {
  width: 15%;
}

.zeero-button.sm {
  width: 25%;
}

.zeero-button.md {
  width: 50%;
}

.zeero-button.lg {
  width: 75%;
}

.zeero-button.xl {
  width: 100%;
}

.zeero-button:not(.disabled):hover,
.zeero-button:not(.disabled):active {
  filter: brightness(90%);
  transition: filter 0.2s, background 0.3s;
}

.zeero-button.disabled {
  user-select: none;
  background: var(--disabled) !important;
  cursor: default;
}

.zeero-button.primary {
  background: var(--primary);
}

.zeero-button.secondary {
  border: 1px solid var(--secondary);
}

.zeero-button.secondary:not(.disabled):hover,
.zeero-button.secondary:not(.disabled):active  {
  background: var(--secondary);
  transition: filter 0.2s, background 0.3s;
}

.zeero-button.danger {
  background: var(--danger);
}