/* One button for the whole site (site-button; owner, 2026-10-30: like elements have one look; DECISIONS 36.10).
   Written by hand, with the tokens of site-button only; checked by design/_tools/check_web_css.py as a component's
   sheet is. A page only places a button (`at box-…`, whose width it keeps and in whose middle it stands) and says
   which it is:

     primary    filled in the colours of the role, its shadow under it
     secondary  outlined in grey; on a phone white too, with the shadow
     danger     red, for what cannot be taken back
     quiet      grey, for what was done already («مشاهده نظر»)
     small      the button inside a card (the normal one is the button of a form or a sheet)

   A primary button that waits for something (disabled, or `inactive`) is grey. The label stands in the middle. */
.site-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--site-button-padding);
  block-size: var(--site-button-height);
  padding-inline: var(--site-button-padding);
  border: 0;
  border-radius: var(--site-button-radius);
  background: none;
  font: var(--text-20-medium);
  white-space: nowrap;
  cursor: pointer;
}

.site-button.small {
  block-size: var(--site-button-small-height);
  padding-inline: var(--site-button-small-padding);
  border-radius: var(--site-button-small-radius);
  font: var(--text-15-medium);
}

/* placed by a box of the design: its width, and the middle of its height */
.at.site-button {
  margin-block-start: calc((var(--box-height) - var(--site-button-height)) / 2);
}

.at.site-button.small {
  margin-block-start: calc((var(--box-height) - var(--site-button-small-height)) / 2);
}

.site-button.primary {
  background: linear-gradient(var(--site-button-angle), var(--theme-from) 0%, var(--theme-to) 100%);
  box-shadow: var(--shadow-lg-gray-89);
  color: var(--color-white);
}

.site-button.secondary {
  box-shadow: inset 0 0 0 var(--site-button-border) var(--color-gray-80);
  color: var(--color-gray-73);
}

.site-button.danger {
  background: var(--color-danger);
  box-shadow: var(--shadow-lg-gray-89);
  color: var(--color-white);
}

.site-button.quiet {
  background: var(--color-gray-81);
  color: var(--color-white);
}

.site-button.primary:disabled,
.site-button.primary.inactive {
  background: var(--color-gray-87);
  cursor: default;
}

.site-button:disabled {
  cursor: default;
}

/* a button of one of the two layouts stays out of the other: its `display` must not win over theirs */
.site-button.on-phone {
  display: none;
}

@media (max-width: 767.98px) {
  .mobile .site-button.on-phone {
    display: flex;
  }

  .mobile .site-button {
    font: var(--text-11-medium);
  }

  .mobile .site-button.small {
    font: var(--text-10-medium);
  }

  /* Phone: the secondary button is a white box with the shadow of the primary one, and its outline, which it needs on a
     white card. */
  .mobile .site-button.secondary {
    background: var(--color-white);
    box-shadow: inset 0 0 0 var(--site-button-border) var(--color-gray-80), var(--shadow-lg-gray-89);
  }
}