.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: 15px 24px;
  border: 0;
  border-radius: var(--radius-button);
  font-family: var(--font-ui);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-ratio);
  text-decoration: none;
  min-height: 44px;
  transition: background-color 120ms ease, box-shadow 120ms ease, color 120ms ease;
}

.button--primary {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
}

.button--primary:hover {
  background-color: var(--color-primary-hover);
  box-shadow: var(--shadow-button);
}

.button--primary:active {
  background-color: var(--color-primary-active);
  box-shadow: var(--shadow-button);
}

.button--secondary {
  background-color: transparent;
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.button--secondary:hover {
  color: var(--color-primary-hover);
  box-shadow: inset 0 0 0 2px var(--color-primary-hover), var(--shadow-button);
}

.button--secondary:active {
  color: var(--color-primary-active);
  box-shadow: inset 0 0 0 1px var(--color-primary-active), var(--shadow-button);
}

.button--accent {
  background-color: var(--color-primary-hover);
  color: var(--color-text-on-dark);
}

.button--accent:hover {
  background-color: var(--color-primary);
  box-shadow: var(--shadow-button);
}

.button--accent:active {
  background-color: var(--color-primary-active);
  box-shadow: var(--shadow-button);
}

.button--lg {
  padding: 16px 18px;
  border-radius: var(--radius-field);
  font-family: var(--font-prose);
  font-size: var(--font-size-23);
}

.button--md {
  padding: 10px 18px;
  font-family: var(--font-prose);
  font-size: var(--font-size-23);
}

.button--request {
  padding: 15px 24px;
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
}

.button--request:hover {
  background-color: var(--color-primary-hover);
  box-shadow: var(--shadow-button);
}

.button--request:active {
  background-color: var(--color-primary-active);
  box-shadow: var(--shadow-button);
}

.button__label--desktop,
.button--request .button__icon {
  display: none;
}

@media (min-width: 768px) {
  .button--request {
    padding: 16px 18px;
    border-radius: var(--radius-field);
    background-color: var(--color-primary-hover);
    font-family: var(--font-prose);
    font-size: var(--font-size-23);
    gap: var(--space-4);
  }

  .button--request:hover {
    background-color: var(--color-primary);
  }

  .button__label--mobile {
    display: none;
  }

  .button__label--desktop,
  .button--request .button__icon {
    display: block;
  }
}

.button--role {
  padding: 15px 24px;
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
}

.button--role:hover {
  background-color: var(--color-primary-hover);
  box-shadow: var(--shadow-button);
}

.button--role:active {
  background-color: var(--color-primary-active);
  box-shadow: var(--shadow-button);
}

.button--role-secondary {
  padding: 15px 24px;
  background-color: var(--color-surface);
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.button--role-secondary:hover {
  color: var(--color-primary-hover);
  box-shadow: inset 0 0 0 2px var(--color-primary-hover), var(--shadow-button);
}

.button--role-secondary:active {
  color: var(--color-primary-active);
  box-shadow: inset 0 0 0 1px var(--color-primary-active), var(--shadow-button);
}

@media (min-width: 768px) {
  .button--role {
    padding: 10px 18px;
    background-color: var(--color-primary-hover);
    font-family: var(--font-prose);
    font-size: var(--font-size-23);
  }

  .button--role:hover {
    background-color: var(--color-primary);
  }

  .button--role-secondary {
    padding: 12px 18px;
    font-family: var(--font-prose);
    font-size: var(--font-size-19);
  }
}

.button__icon {
  display: block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask: var(--icon) center / contain no-repeat;
  -webkit-mask: var(--icon) center / contain no-repeat;
}

.button__icon--check {
  --icon: url('/assets/icons/material/check.svg');
}

.text-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 8px;
  color: var(--color-text-subtle);
  font-family: var(--font-ui);
  font-size: var(--font-size-body);
  text-decoration: none;
}

.text-button:hover,
.text-button:focus-visible {
  text-shadow: 0.03em 0 0 currentColor, -0.03em 0 0 currentColor;
}

.text-button--on-dark {
  color: var(--color-text-on-dark);
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-round);
  background-color: transparent;
  color: var(--color-primary);
  transition: background-color 120ms ease;
}

.icon-button:hover {
  background-color: var(--color-primary-hover-tint);
}

.icon-button__glyph {
  display: block;
  width: 32px;
  height: 32px;
  background-color: currentColor;
  mask: var(--icon) center / contain no-repeat;
  -webkit-mask: var(--icon) center / contain no-repeat;
}

.icon-button__glyph--arrow-left {
  --icon: url('/assets/icons/arrow-left.svg');
}

.alert {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: 16px 24px;
  border-radius: var(--radius-button);
  background-color: var(--color-alert-surface);
  color: var(--color-text-strong);
  font-family: var(--font-ui);
  font-size: var(--font-size-t6);
  font-weight: var(--font-weight-medium);
}

@media (max-width: 767px) {
  .alert {
    padding: 16px;
    font-family: var(--font-prose);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
  }
}

.request-counter {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  font-family: var(--font-prose);
  font-size: var(--font-size-19);
  color: var(--color-primary-hover);
}

.request-counter__value {
  font-weight: var(--font-weight-bold);
}

.request-counter__separator {
  font-weight: var(--font-weight-regular);
}

.request-counter__label {
  font-size: var(--font-size-19);
}

.request-counter--exhausted {
  color: var(--color-limit-desktop);
}

@media (max-width: 767px) {
  .request-counter__label {
    font-size: var(--font-size-body);
  }

  .request-counter__today {
    display: none;
  }

  .request-counter--exhausted {
    color: var(--color-limit-mobile);
  }
}

.role-option {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  align-items: flex-start;
}

.role-option__prompt {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-prose);
  font-size: var(--font-size-23);
  color: var(--color-text-strong);
}

.role-option__prompt img {
  width: 24px;
  height: 24px;
}

@media (max-width: 767px) {
  .role-option {
    align-items: center;
    gap: var(--space-16);
  }

  .role-option__prompt {
    font-size: var(--font-size-18);
  }

  .role-option__prompt img {
    width: 18px;
    height: 18px;
  }
}