/* ============================================================
   BASE BUTTON STYLES
   Fundamental layout and typography for all button variants.
   ============================================================ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
  flex-shrink: 0;
  width: auto;
  min-width: 120px;
  height: 48px;
  padding: 12px 24px 12px 16px;
  border-radius: 24px;
  border: none;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  box-shadow: none;

    /* TYPOGRAPHY */
  font-family: var(--label-label-large-font-family);
  font-size: var(--label-label-large-font-size);
  font-weight: var(--label-label-large-font-weight);
  line-height: var(--label-label-large-line-height);

   /* ELEVATION */
  --md-filled-tonal-button-container-elevation: 0;
  --md-filled-tonal-button-hover-container-elevation: 0;
  --md-filled-tonal-button-focus-container-elevation: 0;
  --md-filled-tonal-button-pressed-container-elevation: 0;
  --md-filled-tonal-button-disabled-container-elevation: 0;

   /* TEXT COLORS */
  --md-filled-tonal-button-label-text-color: var(--btn-text-color);
  --md-filled-tonal-button-hover-label-text-color: var(--btn-text-color);
  --md-filled-tonal-button-focus-label-text-color: var(--btn-text-color);
  --md-filled-tonal-button-pressed-label-text-color: var(--btn-text-color);

  /* ICON COLORS */
  --md-filled-tonal-button-icon-color: var(--btn-text-color);
  --md-filled-tonal-button-hover-icon-color: var(--btn-text-color);
  --md-filled-tonal-button-focus-icon-color: var(--btn-text-color);
  --md-filled-tonal-button-pressed-icon-color: var(--btn-text-color);

  /* STATE LAYER COLORS */
  --md-filled-tonal-button-state-layer-color: var(--btn-state-layer-color);
  --md-filled-tonal-button-hover-state-layer-color: var(--btn-state-layer-color);
  --md-filled-tonal-button-focus-state-layer-color: var(--btn-state-layer-color);
  --md-filled-tonal-button-pressed-state-layer-color: var(--btn-state-layer-color);
}

  /* Adjust padding for buttons without icons to maintain visual balance. */
.btn:not(:has([slot="icon"])) {
  padding: 12px 24px;
}

  /* ============================================================
   COLOR ASSIGNMENTS
   State layer colors and opacities for each button type.
   ============================================================ */
.btn--primary,
.btn--secondary,
.btn--cancel,
.btn--recharge {
  --btn-state-layer-color: white;

  --md-filled-tonal-button-hover-state-layer-opacity: 0.08;
  --md-filled-tonal-button-pressed-state-layer-opacity: 0.12;
}

.btn--tertiary,
.btn--quaternary,
.btn--confirmation {
  --btn-state-layer-color: black;

  --md-filled-tonal-button-hover-state-layer-opacity: 0.06;
  --md-filled-tonal-button-pressed-state-layer-opacity: 0.10;
}

/* ============================================================
   VARIANT STYLE ASSIGNMENTS
   Background, text and icon colors for each specific button type.
   ============================================================ */

.btn--primary {
  --md-filled-tonal-button-container-color: var(--light-primary);
   --btn-text-color: var(--light-onprimary);
  --md-filled-tonal-button-icon-color: var(--light-onprimary);
}

.btn--secondary {
  --md-filled-tonal-button-container-color: var(--light-secondary);
   --btn-text-color: var(--light-onsecondary);
  --md-filled-tonal-button-icon-color: var(--light-onsecondary);
}

.btn--tertiary {
  --md-filled-tonal-button-container-color: var(--light-tertiary);
  --btn-text-color: var(--light-onsurface);
  --md-filled-tonal-button-icon-color: var(--light-onsurface);
}

.btn--quaternary {
  --md-filled-tonal-button-container-color: var(--light-secondarycontainer);
  --btn-text-color: var(--light-onsecondarycontainer);
  --md-filled-tonal-button-icon-color: var(--light-onsecondarycontainer);
}

.btn--confirmation {
  --md-filled-tonal-button-container-color: var(--fixed-onsecondaryfixed);
   --btn-text-color: var(--light-secondary);
   padding: 24px 0;
}

.btn--cancel {
  --md-filled-tonal-button-container-color: var(--light-secondary);
  --btn-text-color: var(--light-onsecondary);
}

.btn--recharge {
  --md-filled-tonal-button-container-color: var(--linear-gradient-blue);
  --btn-text-color: var(--light-onprimary);
  --md-filled-tonal-button-icon-color: var(--light-onprimary);
}

.btn--download-app {
  --md-filled-tonal-button-container-color: var(--light-onsecondary);
  --btn-text-color: var(--light-secondary);
  --md-filled-tonal-button-icon-color: var(--light-secondary);
}

.btn--recharge img {
  width: 24px;
  height: 24px;
}

.btn--get-in-touch {
  --md-filled-tonal-button-container-color: var(--linear-gradient-blue);
  --btn-text-color: var(--light-onprimary);
  --md-filled-tonal-button-icon-color: var(--light-onprimary);
}

.btn--get-in-touch img {
  width: 24px;
  height: 24px;
}

/* ============================================================
   LOADING STATE
   ============================================================ */

.spinner {
  border: 3px solid transparent;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
  flex-shrink: 0;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.btn.loading {
  pointer-events: none;
}

.btn.loading > *:not(.spinner):not(md-circular-progress) {
  opacity: 0;
}

/* ============ RESPONSIVE STYLES ============ */
/* This section contains buttons styles that are applied when the viewport width is 1080px or less. */
@media (max-width: 1080px) {
  /* Adjust the buttons to be icon button. */
  .btn--recharge,
  .btn--download-app {
    border-radius: 35px;
    width: 48px;
    height: 48px;
    min-width: 48px;
    padding: 0;
    font-size: 0;
    gap: 0;
  }

  .btn--recharge img {
    width: 24px;
    height: 24px;
  }
}