/* Buttons: text buttons, round icon buttons, and the rows that hold them. */

@layer components {
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 52px;
    padding: 0 var(--s-5);
    border: 0;
    border-radius: var(--r-md);
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
  }

  .btn--primary {
    background: var(--primary);
    color: var(--on-primary);
  }

  .btn--secondary {
    background: var(--surface-2);
    color: var(--text);
  }

  /* A text button for what removes something: red, no background (the remove button of an address). */
  .btn--text-danger {
    background: transparent;
    color: var(--spice);
  }

  /* The red button that asks for the last word: the quiet red of the alerts, with a ring of the red (the account is removed). */
  .btn--danger {
    background: var(--spice-soft);
    color: var(--spice);
    box-shadow: inset 0 0 0 2px var(--spice);
  }

  .btn--block {
    display: flex;
    width: 100%;
  }

  .btn[disabled],
  .btn[aria-disabled='true'] {
    opacity: 0.45;
  }

  .btn[disabled]:active {
    transform: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .btn[disabled],
    .btn[aria-disabled='true'] {
      cursor: not-allowed;
    }
  }

  /* Buttons side by side, stacked when the text is so large that they would not fit. */
  .btn-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr));
    gap: var(--s-3);
    margin: var(--s-3) var(--s-4);
  }

  /* Round, 44px: back, info, call, show password. On the header it is a translucent circle. */
  .icon-btn {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--tap);
    height: var(--tap);
    padding: 0;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--header-btn);
    box-shadow: var(--header-btn-shadow);
    color: var(--on-header);
    text-decoration: none;
  }

  /* On the page instead of on the header: the colours of a quiet surface. */
  .icon-btn--soft {
    background: var(--surface-2);
    box-shadow: none;
    color: var(--text);
  }

  .icon-btn--plain {
    background: transparent;
    box-shadow: none;
    color: inherit;
  }

  @media (prefers-reduced-motion: no-preference) {
    .btn,
    .icon-btn {
      transition:
        transform var(--dur-fast) ease-out,
        background-color var(--dur) ease-out;
    }

    .btn:active,
    .icon-btn:active {
      transform: scale(0.96);
    }
  }
}