/**
 * @file
 * Default styling for button links, image buttons,
 * and PDS Button elements in CKEditor.
 */
.recipe-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);
}
.recipe-button[data-size=sm] {
  font-size: var(--pds-base-type-font-size-14);
  line-height: var(--pds-base-type-line-height-24);
  padding: calc(var(--pds-base-unit) * 0.375) calc(var(--pds-base-unit) * 2);
}
.recipe-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;
}
.recipe-button[data-variant=default]:not(:disabled) {
  background-color: var(--pds-component-button-default-background);
  color: var(--pds-component-button-default-text);
  border: 1px solid var(--pds-component-button-default-border);
}
.recipe-button[data-variant=default]:not(:disabled):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);
}
.recipe-button[data-variant=default]:not(:disabled):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);
}
.recipe-button[data-variant=default-inverted] {
  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);
}
.recipe-button[data-variant=default-inverted]: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);
}
.recipe-button[data-variant=default-inverted]: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;
}
.recipe-button[data-variant=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);
}
.recipe-button[data-variant=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);
}
.recipe-button[data-variant=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;
}
.recipe-button[data-variant=primary-inverted] {
  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);
}
.recipe-button[data-variant=primary-inverted]: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);
}
.recipe-button[data-variant=primary-inverted]: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);
}
.recipe-button-icon-left > svg {
  margin-right: calc(var(--pds-base-unit) * 1);
}

.houston-text-invert {
  /* stylelint-disable-next-line no-descending-specificity */
}
.houston-text-invert .recipe-button[data-variant=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);
}
.houston-text-invert .recipe-button[data-variant=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);
}
.houston-text-invert .recipe-button[data-variant=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);
}

.cke_widget_element[data-element-settings^='{"variant":"default-inverted"'] {
  background-color: var(--pds-base-color-neutral-gray-04);
  display: inline-block;
}

a.recipe-button {
  text-decoration: none;
}