/**
 * @file
 * Default styling for input buttons.
 */
.button,
#drupal-off-canvas input[type=submit].button {
  font-weight: 400;
  font-size: var(--pds-base-type-font-size-16);
  line-height: var(--pds-base-type-line-height-28);
  font-family: var(--pds-base-type-font-family-100-bold);
  letter-spacing: var(--pds-base-type-letter-spacing-default);
  display: inline-flex;
  align-items: center;
  white-space: normal;
  border-radius: calc(var(--pds-base-unit) * 3.5);
  padding: calc(var(--pds-base-unit) * 1.125) calc(var(--pds-base-unit) * 4);
  cursor: pointer;
  user-select: none;
  text-align: center;
  transition: color 0.1s cubic-bezier(0.4, 0, 0.2, 1) 0s, background-color 0.1s cubic-bezier(0.4, 0, 0.2, 1) 0s, border-color 0.1s cubic-bezier(0.4, 0, 0.2, 1) 0s;
  margin-block: calc(var(--pds-base-unit) * 2) calc(var(--pds-base-unit) * 2);
  margin-inline: 0 calc(var(--pds-base-unit) * 1.5);
}

#drupal-off-canvas input[type=submit].button {
  width: auto;
}

a.button {
  text-decoration: none;
}

/* stylelint-disable-next-line no-descending-specificity */
.button {
  background-color: var(--pds-component-button-default-background);
  color: var(--pds-component-button-default-text);
  border: 1px solid var(--pds-component-button-default-border);
}
.button:disabled {
  background-color: var(--pds-component-button-disabled-background);
  color: var(--pds-component-button-disabled-text);
  border: 1px solid var(--pds-component-button-disabled-border);
  cursor: not-allowed;
}
.button:hover:not(:disabled) {
  background-color: var(--pds-component-button-default-hover-background);
  color: var(--pds-component-button-default-hover-text);
  border: 1px solid var(--pds-component-button-default-hover-border);
}
.button:active:not(:disabled) {
  background-color: var(--pds-component-button-default-active-background);
  color: var(--pds-component-button-default-active-text);
  border: 1px solid var(--pds-component-button-default-active-border);
}

.button--inverted,
#drupal-off-canvas input[type=submit].button {
  background-color: var(--pds-component-button-default-inverted-background);
  color: var(--pds-component-button-default-inverted-text);
  border: 1px solid var(--pds-component-button-default-inverted-border);
}
.button--inverted:hover:not(:disabled),
#drupal-off-canvas input[type=submit].button:hover:not(:disabled) {
  background: var(--pds-component-button-default-inverted-hover-background);
  color: var(--pds-component-button-default-inverted-hover-text);
  border: 1px solid var(--pds-component-button-default-inverted-hover-border);
}
.button--inverted:active:not(:disabled),
#drupal-off-canvas input[type=submit].button:active:not(:disabled) {
  background: var(--pds-component-button-default-inverted-active-background);
  color: var(--pds-component-button-default-inverted-active-text);
  border: 1px solid var(--pds-component-button-default-inverted-active-border);
  outline: none;
}

.button--primary {
  background-color: var(--pds-component-button-primary-background);
  color: var(--pds-component-button-primary-text);
  border: 1px solid var(--pds-component-button-primary-border);
}
.button--primary:hover:not(:disabled) {
  background-color: var(--pds-component-button-primary-hover-background);
  color: var(--pds-component-button-primary-hover-text);
  border: 1px solid var(--pds-component-button-primary-hover-border);
}
.button--primary:active:not(:disabled) {
  background-color: var(--pds-component-button-primary-active-background);
  color: var(--pds-component-button-primary-active-text);
  border: 1px solid var(--pds-component-button-primary-active-border);
  outline: none;
}

/* stylelint-disable-next-line no-descending-specificity */
.button--primary-inverted,
#drupal-off-canvas input[type=submit].button--primary {
  background-color: var(--pds-component-button-primary-inverted-background);
  color: var(--pds-component-button-primary-inverted-text);
  border: 1px solid var(--pds-component-button-primary-inverted-border);
}
.button--primary-inverted:hover:not(:disabled),
#drupal-off-canvas input[type=submit].button--primary:hover:not(:disabled) {
  background-color: var(--pds-component-button-primary-inverted-hover-background);
  color: var(--pds-component-button-primary-inverted-hover-text);
  border: 1px solid var(--pds-component-button-primary-inverted-hover-border);
}
.button--primary-inverted:active:not(:disabled),
#drupal-off-canvas input[type=submit].button--primary:active:not(:disabled) {
  background-color: var(--pds-component-button-primary-inverted-active-background);
  color: var(--pds-component-button-primary-inverted-active-text);
  border: 1px solid var(--pds-component-button-primary-inverted-active-border);
}

.button--danger {
  background-color: var(--pds-component-button-default-background);
  color: var(--pds-semantic-text-error);
  border: 1px solid var(--pds-semantic-border-error);
}
.button--danger:hover:not(:disabled) {
  background-color: var(--pds-component-button-default-hover-background);
  color: var(--pds-semantic-text-error);
  border: 1px solid var(--pds-semantic-border-error);
}
.button--danger:active:not(:disabled) {
  background-color: var(--pds-component-button-default-active-background);
  color: var(--pds-semantic-text-error);
  border: 1px solid var(--pds-semantic-border-error);
}