@utrecht/button-css/dist/index.css

Button component for the Municipality of Utrecht based on the NL Design System architecture

/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
.utrecht-button {
  --_utrecht-button-background-color: var(
    --_utrecht-button-hint-background-color,
    var(--_utrecht-button-appearance-background-color, var(--utrecht-button-background-color))
  );
  --_utrecht-button-color: var(
    --_utrecht-button-hint-color,
    var(--_utrecht-button-appearance-color, var(--utrecht-button-color))
  );
  --_utrecht-button-border-color: var(
    --_utrecht-button-hint-border-color,
    var(--_utrecht-button-appearance-border-color, var(--utrecht-button-border-color, transparent))
  );
  --_utrecht-button-border-bottom-color: var(
    --_utrecht-button-hint-border-bottom-color,
    var(
      --_utrecht-button-hint-border-color,
      var(
        --_utrecht-button-appearance-border-bottom-color,
        var(
          --_utrecht-button-appearance-border-color,
          var(--utrecht-button-border-bottom-color, var(--utrecht-button-border-color, transparent))
        )
      )
    )
  );
  --_utrecht-button-disabled-background-color: var(
    --_utrecht-button-hint-disabled-background-color,
    var(
      --_utrecht-button-appearance-disabled-background-color,
      var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color))
    )
  );
  --_utrecht-button-disabled-border-color: var(
    --_utrecht-button-hint-disabled-border-color,
    var(
      --_utrecht-button-appearance-disabled-border-color,
      var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color))
    )
  );
  --_utrecht-button-disabled-color: var(
    --_utrecht-button-hint-disabled-color,
    var(--_utrecht-button-appearance-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)))
  );
  --_utrecht-button-pressed-background-color: var(
    --_utrecht-button-hint-pressed-background-color,
    var(
      --_utrecht-button-hint-background-color,
      var(
        --_utrecht-button-appearance-pressed-background-color,
        var(
          --_utrecht-button-appearance-background-color,
          var(--utrecht-button-pressed-background-color, var(--utrecht-button-background-color))
        )
      )
    )
  );
  --_utrecht-button-pressed-border-color: var(
    --_utrecht-button-hint-pressed-border-color,
    var(
      --_utrecht-button-hint-border-color,
      var(
        --_utrecht-button-appearance-pressed-border-color,
        var(
          --_utrecht-button-appearance-border-color,
          var(--utrecht-button-pressed-border-color, var(--utrecht-button-border-color))
        )
      )
    )
  );
  --_utrecht-button-pressed-color: var(
    --_utrecht-button-hint-pressed-color,
    var(
      --_utrecht-button-hint-color,
      var(
        --_utrecht-button-appearance-pressed-color,
        var(--_utrecht-button-appearance-color, var(--utrecht-button-pressed-color, var(--utrecht-button-color)))
      )
    )
  );
  --_utrecht-button-focus-background-color: var(
    --_utrecht-button-hint-focus-background-color,
    var(
      --_utrecht-button-hint-background-color,
      var(
        --_utrecht-button-appearance-focus-background-color,
        var(
          --_utrecht-button-appearance-background-color,
          var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color))
        )
      )
    )
  );
  --_utrecht-button-focus-border-color: var(
    --_utrecht-button-hint-focus-border-color,
    var(
      --_utrecht-button-hint-border-color,
      var(
        --_utrecht-button-appearance-focus-border-color,
        var(
          --_utrecht-button-appearance-border-color,
          var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color))
        )
      )
    )
  );
  --_utrecht-button-focus-color: var(
    --_utrecht-button-hint-focus-color,
    var(
      --_utrecht-button-hint-color,
      var(
        --_utrecht-button-appearance-focus-color,
        var(--_utrecht-button-appearance-color, var(--utrecht-button-focus-color, var(--utrecht-button-color)))
      )
    )
  );
  --_utrecht-button-hover-background-color: var(
    --_utrecht-button-hint-hover-background-color,
    var(
      --_utrecht-button-hint-background-color,
      var(
        --_utrecht-button-appearance-hover-background-color,
        var(
          --_utrecht-button-appearance-background-color,
          var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))
        )
      )
    )
  );
  --_utrecht-button-hover-border-color: var(
    --_utrecht-button-hint-hover-border-color,
    var(
      --_utrecht-button-hint-border-color,
      var(
        --_utrecht-button-appearance-hover-border-color,
        var(
          --_utrecht-button-appearance-border-color,
          var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))
        )
      )
    )
  );
  --_utrecht-button-hover-color: var(
    --_utrecht-button-hint-hover-color,
    var(
      --_utrecht-button-hint-color,
      var(
        --_utrecht-button-appearance-hover-color,
        var(--_utrecht-button-appearance-color, var(--utrecht-button-hover-color, var(--utrecht-button-color)))
      )
    )
  );
  --_utrecht-button-active-background-color: var(
    --_utrecht-button-hint-active-background-color,
    var(
      --_utrecht-button-hint-background-color,
      var(
        --_utrecht-button-appearance-active-background-color,
        var(
          --_utrecht-button-appearance-background-color,
          var(--utrecht-button-active-background-color, var(--utrecht-button-background-color))
        )
      )
    )
  );
  --_utrecht-button-active-border-color: var(
    --_utrecht-button-hint-active-border-color,
    var(
      --_utrecht-button-hint-border-color,
      var(
        --_utrecht-button-appearance-active-border-color,
        var(
          --_utrecht-button-appearance-border-color,
          var(--utrecht-button-active-border-color, var(--utrecht-button-border-color))
        )
      )
    )
  );
  --_utrecht-button-active-color: var(
    --_utrecht-button-hint-active-color,
    var(
      --_utrecht-button-hint-color,
      var(
        --_utrecht-button-appearance-active-color,
        var(--_utrecht-button-appearance-color, var(--utrecht-button-active-color, var(--utrecht-button-color)))
      )
    )
  );
  --_utrecht-button-border-width: var(--_utrecht-button-appearance-border-width, var(--utrecht-button-border-width, 0));
  --_utrecht-button-border-block-end-width: var(
    --utrecht-button-border-bottom-width,
    var(--_utrecht-button-border-width, 0)
  );
  --_utrecht-button-font-size: var(--_utrecht-button-appearance-font-size, var(--utrecht-button-font-size));
  --_utrecht-button-line-height: var(--_utrecht-button-appearance-line-height, var(--utrecht-button-line-height));
  --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
  align-items: center;
  background-color: var(--_utrecht-button-background-color);
  block-size: fit-content;
  border-block-end-color: var(--_utrecht-button-border-bottom-color);
  border-block-end-width: var(--_utrecht-button-border-block-end-width);
  border-color: var(--_utrecht-button-border-color);
  border-radius: var(--utrecht-button-border-radius);
  border-style: solid;
  border-width: var(--_utrecht-button-border-width);
  box-sizing: border-box;
  color: var(--_utrecht-button-color);
  column-gap: var(--utrecht-button-column-gap);
  cursor: var(--utrecht-action-activate-cursor, revert);
  display: inline-flex;
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
  inline-size: var(--utrecht-button-inline-size, auto);
  justify-content: center;
  line-height: var(--_utrecht-button-line-height);
  max-inline-size: var(--utrecht-button-max-inline-size, fit-content);
  min-block-size: var(--utrecht-button-min-block-size, 44px);
  min-inline-size: var(--utrecht-button-min-inline-size, 44px);
  padding-block-end: var(--utrecht-button-padding-block-end);
  padding-block-start: var(--utrecht-button-padding-block-start);
  padding-inline-end: var(--utrecht-button-padding-inline-end);
  padding-inline-start: var(--utrecht-button-padding-inline-start);
  scale: 1;
  text-transform: var(--utrecht-button-text-transform);
  -webkit-user-select: none;
  user-select: none;
}
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
  .utrecht-button {
    --_utrecht-button-disabled-border-color: GrayText;
    --_utrecht-button-disabled-color: GrayText;
    background-color: ButtonFace;
    border-color: buttonborder;
    color: ButtonText;
  }
}

.utrecht-button--distanced {
  margin-block-end: var(--utrecht-button-margin-block-end);
  margin-block-start: var(--utrecht-button-margin-block-start);
  margin-inline-end: var(--utrecht-button-margin-inline-end);
  margin-inline-start: var(--utrecht-button-margin-inline-start);
}

.utrecht-button--submit {
  cursor: var(--utrecht-action-submit-cursor, revert);
}

.utrecht-button--busy {
  cursor: var(--utrecht-action-busy-cursor, wait);
}

.utrecht-button--pressed {
  background-color: var(--_utrecht-button-pressed-background-color);
  border-color: var(--_utrecht-button-pressed-border-color);
  color: var(--_utrecht-button-pressed-color);
}

.utrecht-button:disabled,
.utrecht-button--disabled {
  background-color: var(--_utrecht-button-disabled-background-color);
  border-color: var(--_utrecht-button-disabled-border-color);
  color: var(--_utrecht-button-disabled-color);
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
}

.utrecht-button--focus-visible {
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
  z-index: 1;
}

.utrecht-button--focus:not(.utrecht-button--disabled) {
  background-color: var(--_utrecht-button-focus-background-color);
  border-color: var(--_utrecht-button-focus-border-color);
  color: var(--_utrecht-button-focus-color);
  scale: var(--utrecht-button-focus-scale, 1);
}

.utrecht-button:focus-visible {
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
  z-index: 1;
}

.utrecht-button:focus:not(:disabled, [aria-disabled=true], .utrecht-button--disabled) {
  background-color: var(--_utrecht-button-focus-background-color);
  border-color: var(--_utrecht-button-focus-border-color);
  color: var(--_utrecht-button-focus-color);
  scale: var(--utrecht-button-focus-scale, 1);
}

.utrecht-button--hover:not(:disabled, .utrecht-button--disabled),
.utrecht-button:hover:not(:disabled, [aria-disabled=true], .utrecht-button--disabled) {
  background-color: var(--_utrecht-button-hover-background-color);
  border-color: var(--_utrecht-button-hover-border-color);
  color: var(--_utrecht-button-hover-color);
  scale: var(--utrecht-button-hover-scale, 1);
}

.utrecht-button:active:not(:disabled, [aria-disabled=true], .utrecht-button--disabled),
.utrecht-button--active {
  background-color: var(--_utrecht-button-active-background-color);
  border-color: var(--_utrecht-button-active-border-color);
  color: var(--_utrecht-button-active-color);
}

.utrecht-button--primary-action {
  --_utrecht-button-appearance-active-background-color: var(--utrecht-button-primary-action-active-background-color);
  --_utrecht-button-appearance-active-border-color: var(--utrecht-button-primary-action-active-border-color);
  --_utrecht-button-appearance-active-color: var(--utrecht-button-primary-action-active-color);
  --_utrecht-button-appearance-background-color: var(--utrecht-button-primary-action-background-color);
  --_utrecht-button-appearance-border-color: var(--utrecht-button-primary-action-border-color);
  --_utrecht-button-appearance-border-width: var(--utrecht-button-primary-action-border-width);
  --_utrecht-button-appearance-color: var(--utrecht-button-primary-action-color);
  --_utrecht-button-appearance-font-size: var(--utrecht-button-primary-action-font-size);
  --_utrecht-button-appearance-font-weight: var(--utrecht-button-primary-action-font-weight);
  --_utrecht-button-appearance-line-height: var(--utrecht-button-primary-action-line-height);
  --_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-primary-action-disabled-background-color);
  --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-primary-action-disabled-border-color);
  --_utrecht-button-appearance-disabled-color: var(--utrecht-button-primary-action-disabled-color);
  --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-primary-action-focus-background-color);
  --_utrecht-button-appearance-focus-border-color: var(--utrecht-button-primary-action-focus-border-color);
  --_utrecht-button-appearance-focus-color: var(--utrecht-button-primary-action-focus-color);
  --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
  --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-primary-action-hover-border-color);
  --_utrecht-button-appearance-hover-color: var(--utrecht-button-primary-action-hover-color);
  --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-primary-action-pressed-background-color);
  --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-primary-action-pressed-border-color);
  --_utrecht-button-appearance-pressed-color: var(--utrecht-button-primary-action-pressed-color);
}

.utrecht-button--secondary-action {
  --_utrecht-button-appearance-active-background-color: var(--utrecht-button-secondary-action-active-background-color);
  --_utrecht-button-appearance-active-border-color: var(--utrecht-button-secondary-action-active-border-color);
  --_utrecht-button-appearance-active-color: var(--utrecht-button-secondary-action-active-color);
  --_utrecht-button-appearance-background-color: var(--utrecht-button-secondary-action-background-color);
  --_utrecht-button-appearance-border-color: var(--utrecht-button-secondary-action-border-color);
  --_utrecht-button-appearance-border-width: var(--utrecht-button-secondary-action-border-width);
  --_utrecht-button-appearance-color: var(--utrecht-button-secondary-action-color);
  --_utrecht-button-appearance-font-size: var(--utrecht-button-secondary-action-font-size);
  --_utrecht-button-appearance-font-weight: var(--utrecht-button-secondary-action-font-weight);
  --_utrecht-button-appearance-line-height: var(--utrecht-button-secondary-action-line-height);
  --_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-secondary-action-disabled-background-color);
  --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-secondary-action-disabled-border-color);
  --_utrecht-button-appearance-disabled-color: var(--utrecht-button-secondary-action-disabled-color);
  --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-secondary-action-focus-background-color);
  --_utrecht-button-appearance-focus-border-color: var(--utrecht-button-secondary-action-focus-border-color);
  --_utrecht-button-appearance-focus-color: var(--utrecht-button-secondary-action-focus-color);
  --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-secondary-action-hover-background-color);
  --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-secondary-action-hover-border-color);
  --_utrecht-button-appearance-hover-color: var(--utrecht-button-secondary-action-hover-color);
  --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-secondary-action-pressed-background-color);
  --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-secondary-action-pressed-border-color);
  --_utrecht-button-appearance-pressed-color: var(--utrecht-button-secondary-action-pressed-color);
}

.utrecht-button--subtle {
  --_utrecht-button-appearance-active-background-color: var(--utrecht-button-subtle-active-background-color);
  --_utrecht-button-appearance-active-border-color: var(--utrecht-button-subtle-active-border-color);
  --_utrecht-button-appearance-active-color: var(--utrecht-button-subtle-active-color);
  --_utrecht-button-appearance-background-color: var(--utrecht-button-subtle-background-color);
  --_utrecht-button-appearance-border-color: var(--utrecht-button-subtle-border-color);
  --_utrecht-button-appearance-border-width: var(--utrecht-button-subtle-border-width);
  --_utrecht-button-appearance-color: var(--utrecht-button-subtle-color);
  --_utrecht-button-appearance-font-size: var(--utrecht-button-subtle-font-size);
  --_utrecht-button-appearance-font-weight: var(--utrecht-button-subtle-font-weight);
  --_utrecht-button-appearance-line-height: var(--utrecht-button-subtle-line-height);
  --_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-subtle-disabled-background-color);
  --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-subtle-disabled-border-color);
  --_utrecht-button-appearance-disabled-color: var(--utrecht-button-subtle-disabled-color);
  --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-subtle-focus-background-color);
  --_utrecht-button-appearance-focus-border-color: var(--utrecht-button-subtle-focus-border-color);
  --_utrecht-button-appearance-focus-color: var(--utrecht-button-subtle-focus-color);
  --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-subtle-hover-background-color);
  --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-subtle-hover-border-color);
  --_utrecht-button-appearance-hover-color: var(--utrecht-button-subtle-hover-color);
  --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-subtle-pressed-background-color);
  --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-subtle-pressed-border-color);
  --_utrecht-button-appearance-pressed-color: var(--utrecht-button-subtle-pressed-color);
}

.utrecht-button--primary-action.utrecht-button--danger {
  --_utrecht-button-hint-active-background-color: var(--utrecht-button-primary-action-danger-active-background-color);
  --_utrecht-button-hint-active-border-color: var(--utrecht-button-primary-action-danger-active-border-color);
  --_utrecht-button-hint-active-color: var(--utrecht-button-primary-action-danger-active-color);
  --_utrecht-button-hint-background-color: var(--utrecht-button-primary-action-danger-background-color);
  --_utrecht-button-hint-border-color: var(--utrecht-button-primary-action-danger-border-color);
  --_utrecht-button-hint-color: var(--utrecht-button-primary-action-danger-color);
  --_utrecht-button-hint-disabled-background-color: var(
    --utrecht-button-primary-action-danger-disabled-background-color
  );
  --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-primary-action-danger-disabled-border-color);
  --_utrecht-button-hint-disabled-color: var(--utrecht-button-primary-action-danger-disabled-color);
  --_utrecht-button-hint-focus-background-color: var(--utrecht-button-primary-action-danger-focus-background-color);
  --_utrecht-button-hint-focus-border-color: var(--utrecht-button-primary-action-danger-focus-border-color);
  --_utrecht-button-hint-focus-color: var(--utrecht-button-primary-action-danger-focus-color);
  --_utrecht-button-hint-hover-background-color: var(--utrecht-button-primary-action-danger-hover-background-color);
  --_utrecht-button-hint-hover-border-color: var(--utrecht-button-primary-action-danger-hover-border-color);
  --_utrecht-button-hint-hover-color: var(--utrecht-button-primary-action-danger-hover-color);
  --_utrecht-button-hint-pressed-background-color: var(
    --utrecht-button-primary-action-danger-pressed-background-color
  );
  --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-primary-action-danger-pressed-border-color);
  --_utrecht-button-hint-pressed-color: var(--utrecht-button-primary-action-danger-pressed-color);
}

.utrecht-button--primary-action.utrecht-button--ready {
  --_utrecht-button-hint-active-background-color: var(--utrecht-button-primary-action-ready-active-background-color);
  --_utrecht-button-hint-active-border-color: var(--utrecht-button-primary-action-ready-active-border-color);
  --_utrecht-button-hint-active-color: var(--utrecht-button-primary-action-ready-active-color);
  --_utrecht-button-hint-background-color: var(--utrecht-button-primary-action-ready-background-color);
  --_utrecht-button-hint-border-color: var(--utrecht-button-primary-action-ready-border-color);
  --_utrecht-button-hint-color: var(--utrecht-button-primary-action-ready-color);
  --_utrecht-button-hint-disabled-background-color: var(
    --utrecht-button-primary-action-ready-disabled-background-color
  );
  --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-primary-action-ready-disabled-border-color);
  --_utrecht-button-hint-disabled-color: var(--utrecht-button-primary-action-ready-disabled-color);
  --_utrecht-button-hint-focus-background-color: var(--utrecht-button-primary-action-ready-focus-background-color);
  --_utrecht-button-hint-focus-border-color: var(--utrecht-button-primary-action-ready-focus-border-color);
  --_utrecht-button-hint-focus-color: var(--utrecht-button-primary-action-ready-focus-color);
  --_utrecht-button-hint-hover-background-color: var(--utrecht-button-primary-action-ready-hover-background-color);
  --_utrecht-button-hint-hover-border-color: var(--utrecht-button-primary-action-ready-hover-border-color);
  --_utrecht-button-hint-hover-color: var(--utrecht-button-primary-action-ready-hover-color);
  --_utrecht-button-hint-pressed-background-color: var(
    --utrecht-button-primary-action-ready-pressed-background-color
  );
  --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-primary-action-ready-pressed-border-color);
  --_utrecht-button-hint-pressed-color: var(--utrecht-button-primary-action-ready-pressed-color);
}

.utrecht-button--primary-action.utrecht-button--warning {
  --_utrecht-button-hint-active-background-color: var(--utrecht-button-primary-action-warning-active-background-color);
  --_utrecht-button-hint-active-border-color: var(--utrecht-button-primary-action-warning-active-border-color);
  --_utrecht-button-hint-active-color: var(--utrecht-button-primary-action-warning-active-color);
  --_utrecht-button-hint-background-color: var(--utrecht-button-primary-action-warning-background-color);
  --_utrecht-button-hint-border-color: var(--utrecht-button-primary-action-warning-border-color);
  --_utrecht-button-hint-color: var(--utrecht-button-primary-action-warning-color);
  --_utrecht-button-hint-disabled-background-color: var(
    --utrecht-button-primary-action-warning-disabled-background-color
  );
  --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-primary-action-warning-disabled-border-color);
  --_utrecht-button-hint-disabled-color: var(--utrecht-button-primary-action-warning-disabled-color);
  --_utrecht-button-hint-focus-background-color: var(--utrecht-button-primary-action-warning-focus-background-color);
  --_utrecht-button-hint-focus-border-color: var(--utrecht-button-primary-action-warning-focus-border-color);
  --_utrecht-button-hint-focus-color: var(--utrecht-button-primary-action-warning-focus-color);
  --_utrecht-button-hint-hover-background-color: var(--utrecht-button-primary-action-warning-hover-background-color);
  --_utrecht-button-hint-hover-border-color: var(--utrecht-button-primary-action-warning-hover-border-color);
  --_utrecht-button-hint-hover-color: var(--utrecht-button-primary-action-warning-hover-color);
  --_utrecht-button-hint-pressed-background-color: var(
    --utrecht-button-primary-action-warning-pressed-background-color
  );
  --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-primary-action-warning-pressed-border-color);
  --_utrecht-button-hint-pressed-color: var(--utrecht-button-primary-action-warning-pressed-color);
}

.utrecht-button--secondary-action.utrecht-button--danger {
  --_utrecht-button-hint-active-background-color: var(--utrecht-button-secondary-action-danger-active-background-color);
  --_utrecht-button-hint-active-border-color: var(--utrecht-button-secondary-action-danger-active-border-color);
  --_utrecht-button-hint-active-color: var(--utrecht-button-secondary-action-danger-active-color);
  --_utrecht-button-hint-background-color: var(--utrecht-button-secondary-action-danger-background-color);
  --_utrecht-button-hint-border-color: var(--utrecht-button-secondary-action-danger-border-color);
  --_utrecht-button-hint-color: var(--utrecht-button-secondary-action-danger-color);
  --_utrecht-button-hint-disabled-background-color: var(
    --utrecht-button-secondary-action-danger-disabled-background-color
  );
  --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-secondary-action-danger-disabled-border-color);
  --_utrecht-button-hint-disabled-color: var(--utrecht-button-secondary-action-danger-disabled-color);
  --_utrecht-button-hint-focus-background-color: var(--utrecht-button-secondary-action-danger-focus-background-color);
  --_utrecht-button-hint-focus-border-color: var(--utrecht-button-secondary-action-danger-focus-border-color);
  --_utrecht-button-hint-focus-color: var(--utrecht-button-secondary-action-danger-focus-color);
  --_utrecht-button-hint-hover-background-color: var(--utrecht-button-secondary-action-danger-hover-background-color);
  --_utrecht-button-hint-hover-border-color: var(--utrecht-button-secondary-action-danger-hover-border-color);
  --_utrecht-button-hint-hover-color: var(--utrecht-button-secondary-action-danger-hover-color);
  --_utrecht-button-hint-pressed-background-color: var(
    --utrecht-button-secondary-action-danger-pressed-background-color
  );
  --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-secondary-action-danger-pressed-border-color);
  --_utrecht-button-hint-pressed-color: var(--utrecht-button-secondary-action-danger-pressed-color);
}

.utrecht-button--secondary-action.utrecht-button--ready {
  --_utrecht-button-hint-active-background-color: var(--utrecht-button-secondary-action-ready-active-background-color);
  --_utrecht-button-hint-active-border-color: var(--utrecht-button-secondary-action-ready-active-border-color);
  --_utrecht-button-hint-active-color: var(--utrecht-button-secondary-action-ready-active-color);
  --_utrecht-button-hint-background-color: var(--utrecht-button-secondary-action-ready-background-color);
  --_utrecht-button-hint-border-color: var(--utrecht-button-secondary-action-ready-border-color);
  --_utrecht-button-hint-color: var(--utrecht-button-secondary-action-ready-color);
  --_utrecht-button-hint-disabled-background-color: var(
    --utrecht-button-secondary-action-ready-disabled-background-color
  );
  --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-secondary-action-ready-disabled-border-color);
  --_utrecht-button-hint-disabled-color: var(--utrecht-button-secondary-action-ready-disabled-color);
  --_utrecht-button-hint-focus-background-color: var(--utrecht-button-secondary-action-ready-focus-background-color);
  --_utrecht-button-hint-focus-border-color: var(--utrecht-button-secondary-action-ready-focus-border-color);
  --_utrecht-button-hint-focus-color: var(--utrecht-button-secondary-action-ready-focus-color);
  --_utrecht-button-hint-hover-background-color: var(--utrecht-button-secondary-action-ready-hover-background-color);
  --_utrecht-button-hint-hover-border-color: var(--utrecht-button-secondary-action-ready-hover-border-color);
  --_utrecht-button-hint-hover-color: var(--utrecht-button-secondary-action-ready-hover-color);
  --_utrecht-button-hint-pressed-background-color: var(
    --utrecht-button-secondary-action-ready-pressed-background-color
  );
  --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-secondary-action-ready-pressed-border-color);
  --_utrecht-button-hint-pressed-color: var(--utrecht-button-secondary-action-ready-pressed-color);
}

.utrecht-button--secondary-action.utrecht-button--warning {
  --_utrecht-button-hint-active-background-color: var(--utrecht-button-secondary-action-warning-active-background-color);
  --_utrecht-button-hint-active-border-color: var(--utrecht-button-secondary-action-warning-active-border-color);
  --_utrecht-button-hint-active-color: var(--utrecht-button-secondary-action-warning-active-color);
  --_utrecht-button-hint-background-color: var(--utrecht-button-secondary-action-warning-background-color);
  --_utrecht-button-hint-border-color: var(--utrecht-button-secondary-action-warning-border-color);
  --_utrecht-button-hint-color: var(--utrecht-button-secondary-action-warning-color);
  --_utrecht-button-hint-disabled-background-color: var(
    --utrecht-button-secondary-action-warning-disabled-background-color
  );
  --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-secondary-action-warning-disabled-border-color);
  --_utrecht-button-hint-disabled-color: var(--utrecht-button-secondary-action-warning-disabled-color);
  --_utrecht-button-hint-focus-background-color: var(--utrecht-button-secondary-action-warning-focus-background-color);
  --_utrecht-button-hint-focus-border-color: var(--utrecht-button-secondary-action-warning-focus-border-color);
  --_utrecht-button-hint-focus-color: var(--utrecht-button-secondary-action-warning-focus-color);
  --_utrecht-button-hint-hover-background-color: var(--utrecht-button-secondary-action-warning-hover-background-color);
  --_utrecht-button-hint-hover-border-color: var(--utrecht-button-secondary-action-warning-hover-border-color);
  --_utrecht-button-hint-hover-color: var(--utrecht-button-secondary-action-warning-hover-color);
  --_utrecht-button-hint-pressed-background-color: var(
    --utrecht-button-secondary-action-warning-pressed-background-color
  );
  --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-secondary-action-warning-pressed-border-color);
  --_utrecht-button-hint-pressed-color: var(--utrecht-button-secondary-action-warning-pressed-color);
}

.utrecht-button--subtle.utrecht-button--danger {
  --_utrecht-button-hint-active-background-color: var(--utrecht-button-subtle-danger-active-background-color);
  --_utrecht-button-hint-active-border-color: var(--utrecht-button-subtle-danger-active-border-color);
  --_utrecht-button-hint-active-color: var(--utrecht-button-subtle-danger-active-color);
  --_utrecht-button-hint-background-color: var(--utrecht-button-subtle-danger-background-color);
  --_utrecht-button-hint-border-color: var(--utrecht-button-subtle-danger-border-color);
  --_utrecht-button-hint-color: var(--utrecht-button-subtle-danger-color);
  --_utrecht-button-hint-disabled-background-color: var(
    --utrecht-button-subtle-danger-disabled-background-color
  );
  --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-subtle-danger-disabled-border-color);
  --_utrecht-button-hint-disabled-color: var(--utrecht-button-subtle-danger-disabled-color);
  --_utrecht-button-hint-focus-background-color: var(--utrecht-button-subtle-danger-focus-background-color);
  --_utrecht-button-hint-focus-border-color: var(--utrecht-button-subtle-danger-focus-border-color);
  --_utrecht-button-hint-focus-color: var(--utrecht-button-subtle-danger-focus-color);
  --_utrecht-button-hint-hover-background-color: var(--utrecht-button-subtle-danger-hover-background-color);
  --_utrecht-button-hint-hover-border-color: var(--utrecht-button-subtle-danger-hover-border-color);
  --_utrecht-button-hint-hover-color: var(--utrecht-button-subtle-danger-hover-color);
  --_utrecht-button-hint-pressed-background-color: var(
    --utrecht-button-subtle-danger-pressed-background-color
  );
  --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-subtle-danger-pressed-border-color);
  --_utrecht-button-hint-pressed-color: var(--utrecht-button-subtle-danger-pressed-color);
}

.utrecht-button--subtle.utrecht-button--ready {
  --_utrecht-button-hint-active-background-color: var(--utrecht-button-subtle-ready-active-background-color);
  --_utrecht-button-hint-active-border-color: var(--utrecht-button-subtle-ready-active-border-color);
  --_utrecht-button-hint-active-color: var(--utrecht-button-subtle-ready-active-color);
  --_utrecht-button-hint-background-color: var(--utrecht-button-subtle-ready-background-color);
  --_utrecht-button-hint-border-color: var(--utrecht-button-subtle-ready-border-color);
  --_utrecht-button-hint-color: var(--utrecht-button-subtle-ready-color);
  --_utrecht-button-hint-disabled-background-color: var(
    --utrecht-button-subtle-ready-disabled-background-color
  );
  --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-subtle-ready-disabled-border-color);
  --_utrecht-button-hint-disabled-color: var(--utrecht-button-subtle-ready-disabled-color);
  --_utrecht-button-hint-focus-background-color: var(--utrecht-button-subtle-ready-focus-background-color);
  --_utrecht-button-hint-focus-border-color: var(--utrecht-button-subtle-ready-focus-border-color);
  --_utrecht-button-hint-focus-color: var(--utrecht-button-subtle-ready-focus-color);
  --_utrecht-button-hint-hover-background-color: var(--utrecht-button-subtle-ready-hover-background-color);
  --_utrecht-button-hint-hover-border-color: var(--utrecht-button-subtle-ready-hover-border-color);
  --_utrecht-button-hint-hover-color: var(--utrecht-button-subtle-ready-hover-color);
  --_utrecht-button-hint-pressed-background-color: var(
    --utrecht-button-subtle-ready-pressed-background-color
  );
  --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-subtle-ready-pressed-border-color);
  --_utrecht-button-hint-pressed-color: var(--utrecht-button-subtle-ready-pressed-color);
}

.utrecht-button--subtle.utrecht-button--warning {
  --_utrecht-button-hint-active-background-color: var(--utrecht-button-subtle-warning-active-background-color);
  --_utrecht-button-hint-active-border-color: var(--utrecht-button-subtle-warning-active-border-color);
  --_utrecht-button-hint-active-color: var(--utrecht-button-subtle-warning-active-color);
  --_utrecht-button-hint-background-color: var(--utrecht-button-subtle-warning-background-color);
  --_utrecht-button-hint-border-color: var(--utrecht-button-subtle-warning-border-color);
  --_utrecht-button-hint-color: var(--utrecht-button-subtle-warning-color);
  --_utrecht-button-hint-disabled-background-color: var(
    --utrecht-button-subtle-warning-disabled-background-color
  );
  --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-subtle-warning-disabled-border-color);
  --_utrecht-button-hint-disabled-color: var(--utrecht-button-subtle-warning-disabled-color);
  --_utrecht-button-hint-focus-background-color: var(--utrecht-button-subtle-warning-focus-background-color);
  --_utrecht-button-hint-focus-border-color: var(--utrecht-button-subtle-warning-focus-border-color);
  --_utrecht-button-hint-focus-color: var(--utrecht-button-subtle-warning-focus-color);
  --_utrecht-button-hint-hover-background-color: var(--utrecht-button-subtle-warning-hover-background-color);
  --_utrecht-button-hint-hover-border-color: var(--utrecht-button-subtle-warning-hover-border-color);
  --_utrecht-button-hint-hover-color: var(--utrecht-button-subtle-warning-hover-color);
  --_utrecht-button-hint-pressed-background-color: var(
    --utrecht-button-subtle-warning-pressed-background-color
  );
  --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-subtle-warning-pressed-border-color);
  --_utrecht-button-hint-pressed-color: var(--utrecht-button-subtle-warning-pressed-color);
}