html,
body {
  font-variant-ligatures: none;
  font-feature-settings:
    "liga" 0,
    "clig" 0;
}

/* Material Symbol */
.material-symbols-sharp {
  font-variation-settings:
    "FILL" 0,
    "wght" 100,
    "GRAD" 0,
    "opsz" 24;
  vertical-align: middle;
  line-height: 1;
  position: relative;
  top: -2px;
}

/* Spinner icon */
.spinner-icon {
  display: inline-block;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Toast alert */
.toast-stack {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.toast,
.alert {
  border-radius: var(--border-radius);
}

.toast.has-timer,
.alert.has-timer {
  --toast-time: 5000ms;
  position: relative;
  overflow: hidden;
  min-width: 280px;
  pointer-events: auto;
}

/* Bottom timer bar */
.toast.has-timer::after,
.alert.has-timer::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  background-color: currentColor;
  opacity: 0.35;
  transform: scaleX(0);
  transform-origin: left;
  animation: toast-timer var(--toast-time) linear forwards;
}

.toast.has-timer.paused::after {
  animation-play-state: paused;
}

/* Status color tuning */
.toast.bg-success.has-timer::after,
.alert-success.has-timer::after {
  background-color: #198754;
}

.toast.bg-danger.has-timer::after,
.alert-danger.has-timer::after {
  background-color: #dc3545;
}

.toast.bg-warning.has-timer::after,
.alert-warning.has-timer::after {
  background-color: #ffc107;
}

.toast.bg-info.has-timer::after,
.alert-info.has-timer::after {
  background-color: #0dcaf0;
}

/* Animation */
@keyframes toast-timer {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.has-timer::after {
  animation-play-state: running;
}

.has-timer.paused::after {
  animation-play-state: paused;
}

/* Password toggle */
.password-toggle .btn-toggle {
  border: 1px solid var(--bs-border-color);
  background: var(--bs-border-color);
  padding: 0 0.75rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.password-toggle .material-symbols-sharp {
  font-size: 1.25rem;
  line-height: 1;
  vertical-align: middle;
}