.btn {
  position: relative;
  overflow: hidden;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  align-items: center;
  font-family: var(--font-family-secondary), sans-serif;
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  border-radius: var(--button-corner-radius);
  text-align: center;
  min-width: 6.6rem;
  border: none;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.btn:not(:disabled) {
  cursor: pointer;
}
.btn:disabled {
  cursor: not-allowed;
}
.btn--primary {
  background: linear-gradient(to bottom, var(--btn-primary-gradient-top), var(--btn-primary-gradient-bottom));
  color: var(--btn-primary-text);
}
.btn--primary:not(.btn--disabled):hover {
  background: linear-gradient(to bottom, var(--btn-primary-gradient-hover-top), var(--btn-primary-gradient-hover-bottom));
}
.btn--primary.btn--disabled {
  background: none;
  background-color: var(--btn-primary-disabled-bg);
  color: var(--text-negative);
  cursor: not-allowed;
  opacity: 0.7;
}
.btn--secondary {
  background: linear-gradient(to bottom, var(--btn-secondary-gradient-top), var(--btn-secondary-gradient-bottom));
  color: var(--btn-secondary-text);
}
.btn--secondary:not(.btn--disabled):hover {
  background: linear-gradient(to bottom, var(--btn-secondary-gradient-hover-top), var(--btn-secondary-gradient-hover-bottom));
}
.btn--secondary.btn--disabled {
  background: none;
  background-color: var(--btn-secondary-disabled-bg);
  color: var(--text-negative);
  cursor: not-allowed;
  opacity: 0.7;
}
.btn--ghost {
  background: linear-gradient(to bottom, var(--btn-ghost-gradient-top), var(--btn-ghost-gradient-bottom));
  color: var(--btn-ghost-text);
}
.btn--ghost:not(.btn--disabled):hover {
  background: linear-gradient(to bottom, var(--btn-ghost-gradient-hover-top), var(--btn-ghost-gradient-hover-bottom));
}
.btn--ghost.btn--disabled {
  background: none;
  background-color: var(--btn-ghost-disabled-bg);
  color: var(--btn-ghost-disabled-text);
  cursor: not-allowed;
}
.btn--warning {
  border: none;
  background-color: var(--color-warning);
  color: var(--text-negative);
}
.btn--warning:not(.btn--disabled):hover {
  background-color: var(--color-warning--hover);
  color: var(--text-negative);
}
.btn--warning.btn--disabled {
  background-color: var(--color-warning);
  opacity: 0.5;
  color: var(--text-negative);
  cursor: not-allowed;
}
.btn--small {
  height: var(--button-height-sm);
  padding: var(--space-button-padding-y-sm) var(--space-button-padding-x-sm);
  font-size: var(--font-micro-size);
  line-height: 1;
}
.btn--small .el-loading-spinner {
  top: 100%;
}
.btn--small .el-loading-spinner .circular {
  width: 1.6rem;
  height: 1.6rem;
}
.btn--medium {
  height: var(--button-height-md);
  padding: var(--space-button-padding-y-md) var(--space-button-padding-x-md);
  font-size: var(--font-mini-size);
  line-height: 1;
}
.btn--medium .el-loading-spinner {
  top: 85%;
}
.btn--medium .el-loading-spinner .circular {
  width: 2rem;
  height: 2rem;
}
.btn--large {
  height: var(--button-height-lg);
  padding: var(--space-button-padding-y-lg) var(--space-button-padding-x-lg);
  font-size: var(--font-mini-size);
  line-height: 1;
}
.btn--large .el-loading-spinner {
  top: 75%;
}
.btn--large .el-loading-spinner .circular {
  width: 2.4rem;
  height: 2.4rem;
}