@amsterdam/design-system-css 0.1.4 → 0.1.6

package/dist/button/button.css

@@ -1,706 +1 @@
-/**
- * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- * Copyright (c) 2021 Gemeente Utrecht
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- * Copyright (c) 2021 Gemeente Utrecht
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
-.utrecht-button {
-  /*
-  `--_utrecht-button-hint` is the internal prefix for the applied optional hint, it is not an API.
-  The hint color takes priority over the appearance color.
-
-  `--_utrecht-button-appearance` is the internal prefix for the appearance
-  (primary-action, secondary-action or subtle), it is not an API.
-  */
-  --_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-icon-size: var(--utrecht-button-icon-size, 1em);
-  align-items: center;
-  background-color: var(--_utrecht-button-background-color);
-  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);
-  cursor: var(--utrecht-action-activate-cursor);
-  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));
-  gap: var(--utrecht-button-icon-gap);
-  inline-size: var(--utrecht-button-inline-size, auto);
-  justify-content: center;
-  letter-spacing: var(--utrecht-button-letter-spacing);
-  line-height: var(--utrecht-button-line-height);
-  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);
-  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;
-    /*
-     * `<button>` has these styles by default, but other elements styles as button do not:
-     *
-     * - `<div role="button">` needs this.
-     * - `<a role="button">` needs this.
-     */
-    background-color: ButtonFace;
-    border-color: buttonborder;
-    color: ButtonText;
-    /* TODO: Find a way to express the `pressed` state */
-  }
-}
-
-.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 {
-  /* lower priority specificty than busy and disabled cursor */
-  cursor: var(--utrecht-action-submit-cursor);
-}
-
-.utrecht-button--busy {
-  cursor: var(--utrecht-action-busy-cursor);
-}
-
-.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);
-}
-
-.utrecht-button--focus-visible {
-  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
-  /* - The browser default focus ring should apply when these CSS custom properties are not set.
-   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
-   *   can combine it with the focus ring box shadow.
-   */
-  --_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);
-}
-
-.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 {
-  /* Show focus ring even for disabled :focus-visible buttons. *
-  /* For example: <button disabled tabindex="0"> */
-  /* - The browser default focus ring should apply when these CSS custom properties are not set.
-   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
-   *   can combine it with the focus ring box shadow.
-   */
-  --_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);
-}
-
-.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);
-  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
-  /* - The browser default focus ring should apply when these CSS custom properties are not set.
-   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
-   *   can combine it with the focus ring box shadow.
-   */
-  --_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);
-}
-
-/* override the `:focus` selector above */
-/* stylelint-disable-next-line no-descending-specificity */
-.utrecht-button:focus:not(:focus-visible) {
-  /* undo focus ring */
-  box-shadow: none;
-  outline-style: revert;
-}
-
-.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-weight: var(--utrecht-button-primary-action-font-weight);
-  --_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-weight: var(--utrecht-button-secondary-action-font-weight);
-  --_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-weight: var(--utrecht-button-subtle-font-weight);
-  --_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);
-}
-
-/**
- * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
- */
-/*
-  The breakpoint is 854px / 16 = 53.375rems
-  https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
-*/
-.amsterdam-button {
-  font-size: var(--amsterdam-button-font-size-narrow);
-}
-@media screen and (width > 53.375rem) {
-  .amsterdam-button {
-    font-size: var(--amsterdam-button-font-size-wide);
-  }
-}
-
-.amsterdam-button--secondary:hover {
-  box-shadow: var(--amsterdam-button-secondary-hover-box-shadow);
-}
-
-/*# sourceMappingURL=button.css.map */
+.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-icon-size: var(--utrecht-button-icon-size, 1em);align-items:center;background-color:var(--_utrecht-button-background-color);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);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));gap:var(--utrecht-button-icon-gap);inline-size:var(--utrecht-button-inline-size, auto);justify-content:center;line-height:var(--utrecht-button-line-height);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);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)}.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{--_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)}.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-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)}.utrecht-button:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.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-weight: var(--utrecht-button-primary-action-font-weight);--_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-weight: var(--utrecht-button-secondary-action-font-weight);--_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-weight: var(--utrecht-button-subtle-font-weight);--_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)}.amsterdam-button{font-size:var(--amsterdam-button-narrow-font-size)}@media screen and (width > 53.375rem){.amsterdam-button{font-size:var(--amsterdam-button-wide-font-size)}}.amsterdam-button--secondary{box-shadow:var(--amsterdam-button-secondary-box-shadow)}.amsterdam-button--secondary:disabled,.amsterdam-button--secondary [aria-disabled=true]{box-shadow:var(--amsterdam-button-secondary-disabled-box-shadow)}.amsterdam-button--secondary:hover:not(:disabled,[aria-disabled=true]){box-shadow:var(--amsterdam-button-secondary-hover-box-shadow)}.amsterdam-button--secondary.amsterdam-button--secondary:focus{color:var(--amsterdam-button-secondary-focus-color)}.amsterdam-button--secondary:focus:not(:disabled,[aria-disabled=true]){box-shadow:var(--amsterdam-button-secondary-focus-box-shadow)}.amsterdam-button--tertiary:hover:not(:disabled,[aria-disabled=true]){box-shadow:var(--amsterdam-button-tertiary-hover-box-shadow)}.amsterdam-button--tertiary:focus:not(:disabled,[aria-disabled=true]){box-shadow:var(--amsterdam-button-tertiary-focus-box-shadow)}/*# sourceMappingURL=button.css.map */