.btn, .rank-card-save-btn, .rank-card-reset-btn, .rank-card-input-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  margin: 10px;
  border-radius: var(--radius-md);
  z-index: 10;
}

.symbol-btn-image {
  max-width: 30px;
  max-height: 30px;
}

.btn-text {
}

.btn-image-primary {
  filter: brightness(0) saturate(100%) invert(44%) sepia(99%) saturate(1000%) hue-rotate(180deg) brightness(140%) contrast(91%);
}

.btn-primary, .ambtn-edit {
  background: var(--md-sys-main-blue-transparent-85);
  border: var(--border-thin) solid var(--md-sys-main-blue-border);
  color: var(--md-sys-main-blue);
  cursor: pointer;
  width: fit-content;
}

.btn-primary:hover, .ambtn-edit:hover {
  background: var(--md-sys-main-blue-transparent-85-hover);
  box-shadow: 0px 0px 10px 5px var(--md-sys-main-blue-transparent-85-hover);
}

.btn-primary:active, .ambtn-edit:active {
  background: var(--md-sys-main-blue-transparent-85-active);
}

.rank-card-reset-btn, .rank-card-input-btn {
  width: fit-content;
  padding: 10px;
}

/* --- Primary Button --- */

.btn-image-seconday {
  filter: brightness(0) saturate(100%) invert(75%) sepia(50%) saturate(6000%) hue-rotate(265deg) brightness(100%) contrast(95%);
}

.btn-secondary, .db-btn-secondary {
  background: var(--md-sys-main-pink-transparent-85);
  border: var(--border-thin) solid var(--md-sys-main-pink-border);
  color: var(--md-sys-main-pink);
  cursor: pointer;
}

.btn-secondary:hover, .db-btn-secondary:hover {
  background: var(--md-sys-main-pink-transparent-85-hover);
  box-shadow: 0px 0px 10px 5px var(--md-sys-main-pink-transparent-85-hover);
}

.btn-secondary:active, .db-btn-secondary:active {
  background: var(--md-sys-main-pink-transparent-85-active);
}

/* --- Button Discord --- */

.btn-image-discord {
  filter: brightness(0) saturate(100%) invert(46%) sepia(75%) saturate(7000%) hue-rotate(190deg) brightness(84%) contrast(95%);
}

.btn-discord {
  background: var(--md-sys-main-discord-transparent-85);
  border: var(--border-thin) solid var(--md-sys-main-discord-border);
  color: var(--md-sys-main-discord);
  cursor: pointer;
}

.btn-discord:hover {
  background: var(--md-sys-main-discord-transparent-85-hover);
  box-shadow: 0px 0px 10px 5px var(--md-sys-main-discord-transparent-85-hover);
}

.btn-discord:active {
  background: var(--md-sys-main-discord-transparent-85-active);
}

@media (max-width: 1025px) {
  .btn-text-discord-full-text {
    display: none;
  }
}

@media (min-width: 1025px) {
  .btn-text-discord-half-text {
    display: none;
  }
}

@media (max-width: 445px) {
  .btn-text-discord-half-text {
    display: none;
  }
}

/* --- Button Premium --- */

.btn-image-premium {
  filter: brightness(0) saturate(100%) invert(88%) sepia(42%) saturate(500%) hue-rotate(20deg) brightness(80%) contrast(95%);
}

.btn-premium {
  background: var(--md-sys-main-premium-transparent-85);
  border: var(--border-thin) solid var(--md-sys-main-premium-border);
  color: var(--md-sys-main-premium);
  cursor: pointer;
}

.btn-premium:hover {
  background: var(--md-sys-main-premium-transparent-85-hover);
  box-shadow: 0px 0px 10px 5px var(--md-sys-main-premium-transparent-85-hover);
}

.btn-premium:active {
  background: var(--md-sys-main-premium-transparent-85-active);
}

/* --- Button Warning --- */

.btn-image-warning {
  filter: brightness(0) saturate(100%) invert(35%) sepia(95%) saturate(1800%) hue-rotate(345deg) brightness(95%) contrast(95%);
}

.btn-warning, .ambtn-delete {
  background: var(--md-sys-main-warning-transparent-85);
  border: var(--border-thin) solid var(--md-sys-main-warning-border);
  color: var(--md-sys-main-warning);
  cursor: pointer;
}

.btn-warning:hover, .ambtn-delete:hover {
  background: var(--md-sys-main-premium-transparent-85-hover);
  box-shadow: 0px 0px 10px 5px var(--md-sys-main-premium-transparent-85-hover);
}

.btn-warning:active, .ambtn-delete:active {
  background: var(--md-sys-main-premium-transparent-85-active);
}

/* button green */

.automationList-status, .automation-list-add-button, .rank-card-save-btn, .rank-card-input-btn {
  background: var(--md-sys-main-green-transparent-85);
  color: var(--md-sys-main-green);
  border: 1px solid var(--md-sys-main-green);
  cursor: pointer;
}

.automationList-status:hover, .automation-list-add-button:hover, .rank-card-save-btn:hover, .rank-card-input-btn:hover {
  background: var(--md-sys-main-green-transparent-85-hover);
}

.automationList-status:active, .automation-list-add-button:active, .rank-card-save-btn:active, .rank-card-input-btn:active {
  background: var(--md-sys-main-green-transparent-85-active);
}

.rank-card-save-btn {
  padding: 10px;
  margin-left: -1px;
}

/* button grey */

.roleReward-btn-secondary, .rank-card-reset-btn {
  padding: 10px;
  border-radius: 10px;
  background: var(--sys-milk-glass-background-lighter);
  border: 2px solid var(--sys-main-backround-dark-var4);
  color: var(--sys-main-backround-dark-var5);
  cursor: pointer;
}

.rank-card-reset-btn:hover {
  background: var(--sys-glass-background-light);
}

.automationList-status--disabled {
  background: var(--sys-glass-background);
  border: 1px solid var(--sys-main-backround-dark-var5);
  color: var(--sys-main-backround-dark-var5);
  cursor: pointer;
}

/* Database Manager Buttons */

.db-btn-primary, .db-subscribe-btn, .db-upgrade-subscription-btn, .db-modal-confirm {
  background: var(--md-sys-main-blue-transparent-85);
  border: var(--border-thin) solid var(--md-sys-main-blue-border);
  color: var(--md-sys-main-blue);
  border-radius: var(--radius-md);
  padding: 10px 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.db-btn-primary:hover, .db-subscribe-btn:hover, .db-upgrade-subscription-btn:hover, .db-modal-confirm:hover {
  background: var(--md-sys-main-blue-transparent-85-hover);
  box-shadow: 0px 0px 10px 5px var(--md-sys-main-blue-transparent-85-hover);
}

.db-btn-secondary, .db-modal-cancel {
  background: var(--sys-milk-glass-background-lighter);
  border: var(--border-thin) solid var(--sys-main-backround-dark-var4);
  color: var(--sys-main-backround-dark-var5);
  border-radius: var(--radius-md);
  padding: 10px 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.db-btn-secondary:hover, .db-modal-cancel:hover {
  background: var(--sys-glass-background-light);
}

.db-btn-warning, .db-cancel-btn {
  background: var(--md-sys-main-warning-transparent-85);
  border: var(--border-thin) solid var(--md-sys-main-warning-border);
  color: var(--md-sys-main-warning);
  border-radius: var(--radius-md);
  padding: 10px 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.db-btn-warning:hover, .db-cancel-btn:hover {
  background: var(--md-sys-main-warning-transparent-85-hover);
  box-shadow: 0px 0px 10px 5px var(--md-sys-main-warning-transparent-85-hover);
}

.db-quantity-btn {
  background: var(--sys-milk-glass-background-lighter);
  border: var(--border-thin) solid var(--sys-main-backround-dark-var4);
  color: var(--sys-main-backround-dark-var5);
  border-radius: var(--radius-md);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.2s ease;
}

.db-quantity-btn:hover {
  background: var(--sys-glass-background-light);
}

.db-upgrade-btn {
  background: var(--md-sys-main-blue-transparent-85);
  border: var(--border-thin) solid var(--md-sys-main-blue-border);
  color: var(--md-sys-main-blue);
  border-radius: var(--radius-md);
  padding: 12px 24px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.db-upgrade-btn:hover {
  background: var(--md-sys-main-blue-transparent-85-hover);
  box-shadow: 0px 0px 10px 5px var(--md-sys-main-blue-transparent-85-hover);
}