.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.6rem;
  font-size: 1.6rem;
  font-weight: 500;
  border-radius: 0.4rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  text-align: center;
  user-select: none;
}
.btn:disabled {
  background-color: var(--sss-btn-base-bg-color-disabled);
  color: var(--sss-btn-base-text-color-disabled);
  cursor: not-allowed;
}
.btn--primary {
  background-color: var(--sss-btn-primary-bg-color);
  color: var(--sss-btn-primary-text-color);
}
.btn--primary:hover {
  background-color: var(--sss-btn-primary-bg-color-hover);
  color: var(--sss-btn-primary-text-color-hover);
}
.btn--primary:active {
  background-color: var(--sss-btn-primary-bg-color-active);
  color: var(--sss-btn-primary-text-color-active);
}
.btn--primary:disabled {
  background-color: var(--sss-btn-primary-bg-color-disabled);
  color: var(--sss-btn-primary-text-color-disabled);
}
.btn--secondary {
  background-color: var(--sss-btn-secondary-bg-color);
  color: var(--sss-btn-secondary-text-color);
}
.btn--secondary:hover {
  background-color: var(--sss-btn-secondary-bg-color-hover);
  color: var(--sss-btn-secondary-text-color-hover);
}
.btn--secondary:active {
  background-color: var(--sss-btn-secondary-bg-color-active);
  color: var(--sss-btn-secondary-text-color-active);
}
.btn--secondary:disabled {
  background-color: var(--sss-btn-secondary-bg-color-disabled);
  color: var(--sss-btn-secondary-text-color-disabled);
}
.btn--light {
  background-color: var(--sss-btn-light-bg-color);
  color: var(--sss-btn-light-text-color);
}
.btn--light:hover {
  background-color: var(--sss-btn-light-bg-color-hover);
  color: var(--sss-btn-light-text-color-hover);
}
.btn--light:active {
  background-color: var(--sss-btn-light-bg-color-active);
  color: var(--sss-btn-light-text-color-active);
}
.btn--light:disabled {
  background-color: var(--sss-btn-light-bg-color-disabled);
  color: var(--sss-btn-light-text-color-disabled);
}
.btn--success {
  background-color: var(--sss-btn-success-bg-color);
  color: var(--sss-btn-success-text-color);
}
.btn--success:hover {
  background-color: var(--sss-btn-success-bg-color-hover);
  color: var(--sss-btn-success-text-color-hover);
}
.btn--success:active {
  background-color: var(--sss-btn-success-bg-color-active);
  color: var(--sss-btn-success-text-color-active);
}
.btn--success:disabled {
  background-color: var(--sss-btn-success-bg-color-disabled);
  color: var(--sss-btn-success-text-color-disabled);
}
.btn--warning {
  background-color: var(--sss-btn-warning-bg-color);
  color: var(--sss-btn-warning-text-color);
}
.btn--warning:hover {
  background-color: var(--sss-btn-warning-bg-color-hover);
  color: var(--sss-btn-warning-text-color-hover);
}
.btn--warning:active {
  background-color: var(--sss-btn-warning-bg-color-active);
  color: var(--sss-btn-warning-text-color-active);
}
.btn--warning:disabled {
  background-color: var(--sss-btn-warning-bg-color-disabled);
  color: var(--sss-btn-warning-text-color-disabled);
}
.btn--danger {
  background-color: var(--sss-btn-danger-bg-color);
  color: var(--sss-btn-danger-text-color);
}
.btn--danger:hover {
  background-color: var(--sss-btn-danger-bg-color-hover);
  color: var(--sss-btn-danger-text-color-hover);
}
.btn--danger:active {
  background-color: var(--sss-btn-danger-bg-color-active);
  color: var(--sss-btn-danger-text-color-active);
}
.btn--danger:disabled {
  background-color: var(--sss-btn-danger-bg-color-disabled);
  color: var(--sss-btn-danger-text-color-disabled);
}
.btn--info {
  background-color: var(--sss-btn-info-bg-color);
  color: var(--sss-btn-info-text-color);
}
.btn--info:hover {
  background-color: var(--sss-btn-info-bg-color-hover);
  color: var(--sss-btn-info-text-color-hover);
}
.btn--info:active {
  background-color: var(--sss-btn-info-bg-color-active);
  color: var(--sss-btn-info-text-color-active);
}
.btn--info:disabled {
  background-color: var(--sss-btn-info-bg-color-disabled);
  color: var(--sss-btn-info-text-color-disabled);
}
.btn--ghost {
  color: var(--sss-btn-ghost-text-color);
  background-color: var(--sss-btn-ghost-bg-color);
  border: 1px dotted var(--sss-btn-ghost-border-color);
}
.btn--ghost:hover {
  color: var(--sss-btn-ghost-text-color-hover);
  border-color: var(--sss-btn-ghost-border-color-hover);
}
.btn--ghost:disabled {
  background-color: var(--sss-btn-ghost-bg-color-disabled);
  color: var(--sss-btn-ghost-text-color-disabled);
  border-color: var(--sss-btn-ghost-border-color-disabled);
}
.btn--icon {
  padding: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn--icon-text {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.btn--small {
  padding: 0.4rem 1.2rem;
  font-size: 1.4rem;
}
.btn--medium {
  padding: 0.8rem 1.6rem;
  font-size: 1.6rem;
}
.btn--large {
  padding: 1.2rem 2rem;
  font-size: 1.8rem;
}
.btn--jumbo {
  padding: 2rem 4rem;
  font-size: 2.2rem;
}

a.btn {
  text-decoration: none;
}