@kelvininc/ui-components/dist/collection/components/action-button/action-button.css

Kelvin UI Components

/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** CODE/CONSOLE **/
@property --rotation {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate-border {
  to {
    --rotation: 360deg;
  }
}
:host {
  /**
   * @prop --text-color-default-primary: Text color when state is default and theme is primary.
   * @prop --text-color-default-secondary: Text color when state is default and theme is secondary.
   * @prop --text-color-default-tertiary: Text color when state is default and theme is tertiary.
   * @prop --text-color-default-danger: Text color when state is default and theme is danger.
   * @prop --text-color-hover-primary: Text color when state is hover and theme is primary.
   * @prop --text-color-hover-secondary: Text color when state is hover and theme is secondary.
   * @prop --text-color-hover-tertiary: Text color when state is hover and theme is tertiary.
   * @prop --text-color-hover-danger: Text color when state is hover and theme is danger.
   * @prop --text-color-focus-primary: Text color when state is focus and theme is primary.
   * @prop --text-color-focus-secondary: Text color when state is focus and theme is secondary.
   * @prop --text-color-focus-tertiary: Text color when state is focus and theme is tertiary.
   * @prop --text-color-focus-danger: Text color when state is focus and theme is danger.
   * @prop --text-color-disabled-primary: Text color when state is disabled and theme is primary.
   * @prop --text-color-disabled-secondary: Text color when state is disabled and theme is secondary.
   * @prop --text-color-disabled-tertiary: Text color when state is disabled and theme is tertiary.
   * @prop --text-color-disabled-danger: Text color when state is disabled and theme is danger.
   * @prop --text-color-active-primary: Text color when state is active and theme is primary.
   * @prop --text-color-active-secondary: Text color when state is active and theme is secondary.
   * @prop --text-color-active-tertiary: Text color when state is active and theme is tertiary.
   * @prop --text-color-active-danger: Text color when state is active and theme is danger.
   * @prop --background-color-default-primary: Background color when state is default and theme is primary.
   * @prop --background-color-default-secondary: Background color when state is default and theme is secondary.
   * @prop --background-color-default-tertiary: Background color when state is default and theme is tertiary.
   * @prop --background-color-default-danger: Background color when state is default and theme is danger.
   * @prop --background-color-hover-primary: Background color when state is hover and theme is primary.
   * @prop --background-color-hover-secondary: Background color when state is hover and theme is secondary.
   * @prop --background-color-hover-tertiary: Background color when state is hover and theme is tertiary.
   * @prop --background-color-hover-danger: Background color when state is hover and theme is danger.
   * @prop --background-color-focus-primary: Background color when state is focus and theme is primary.
   * @prop --background-color-focus-secondary: Background color when state is focus and theme is secondary.
   * @prop --background-color-focus-tertiary: Background color when state is focus and theme is tertiary.
   * @prop --background-color-focus-danger: Background color when state is focus and theme is danger.
   * @prop --background-color-disabled-primary: Background color when state is disabled and theme is primary.
   * @prop --background-color-disabled-secondary: Background color when state is disabled and theme is secondary.
   * @prop --background-color-disabled-tertiary: Background color when state is disabled and theme is tertiary.
   * @prop --background-color-disabled-danger: Background color when state is disabled and theme is danger.
   * @prop --background-color-active-primary: Background color when state is active and theme is primary.
   * @prop --background-color-active-secondary: Background color when state is active and theme is secondary.
   * @prop --background-color-active-tertiary: Background color when state is active and theme is tertiary.
   * @prop --background-color-active-danger: Background color when state is active and theme is danger.
   * @prop --border-color-default-primary: Border color when state is default and theme is primary.
   * @prop --border-color-default-secondary: Border color when state is default and theme is secondary.
   * @prop --border-color-default-tertiary: Border color when state is default and theme is tertiary.
   * @prop --border-color-default-danger: Border color when state is default and theme is danger.
   * @prop --border-color-hover-primary: Border color when state is hover and theme is primary.
   * @prop --border-color-hover-secondary: Border color when state is hover and theme is secondary.
   * @prop --border-color-hover-tertiary: Border color when state is hover and theme is tertiary.
   * @prop --border-color-hover-danger: Border color when state is hover and theme is danger.
   * @prop --border-color-focus-primary: Border color when state is focus and theme is primary.
   * @prop --border-color-focus-secondary: Border color when state is focus and theme is secondary.
   * @prop --border-color-focus-tertiary: Border color when state is focus and theme is tertiary.
   * @prop --border-color-focus-danger: Border color when state is focus and theme is danger.
   * @prop --border-color-disabled-primary: Border color when state is disabled and theme is primary.
   * @prop --border-color-disabled-secondary: Border color when state is disabled and theme is secondary.
   * @prop --border-color-disabled-tertiary: Border color when state is disabled and theme is tertiary.
   * @prop --border-color-disabled-danger: Border color when state is disabled and theme is danger.
   * @prop --border-color-active-primary: Border color when state is active and theme is primary.
   * @prop --border-color-active-secondary: Border color when state is active and theme is secondary.
   * @prop --border-color-active-tertiary: Border color when state is active and theme is tertiary.
   * @prop --border-color-active-danger: Border color when state is active and theme is danger.
   * @prop --button-height-large: Button's height when size large.
   * @prop --button-height-small: Button's height when size small.
   * @prop --button-padding-x-large: Button's horizontal padding when size is large.
   * @prop --button-padding-x-small: Button's horizontal padding when size is small.
   */
  --text-color-default-primary: var(--kv-text, #fff);
  --text-color-default-secondary: var(--kv-text, #fff);
  --text-color-default-tertiary: var(--kv-text, #fff);
  --text-color-default-ghost: var(--kv-text, #fff);
  --text-color-default-danger: var(--kv-text, #fff);
  --text-color-hover-primary: var(--kv-text, #fff);
  --text-color-hover-secondary: var(--kv-text, #fff);
  --text-color-hover-tertiary: var(--kv-neutral-2, #e5e5e5);
  --text-color-hover-ghost: var(--kv-neutral-2, #e5e5e5);
  --text-color-hover-danger: var(--kv-text, #fff);
  --text-color-focus-primary: var(--kv-text, #fff);
  --text-color-focus-secondary: var(--kv-text, #fff);
  --text-color-focus-tertiary: var(--kv-text, #fff);
  --text-color-focus-ghost: var(--kv-text, #fff);
  --text-color-focus-danger: var(--kv-text, #fff);
  --text-color-disabled-primary: var(--kv-neutral-5, #707070);
  --text-color-disabled-secondary: var(--kv-neutral-5, #707070);
  --text-color-disabled-tertiary: var(--kv-neutral-5, #707070);
  --text-color-disabled-ghost: var(--kv-neutral-5, #707070);
  --text-color-disabled-danger: var(--kv-text, #fff);
  --text-color-active-primary: var(--kv-text, #fff);
  --text-color-active-secondary: var(--kv-text, #fff);
  --text-color-active-tertiary: var(--kv-neutral-2, #e5e5e5);
  --text-color-active-ghost: var(--kv-neutral-2, #e5e5e5);
  --text-color-active-danger: var(--kv-text, #fff);
  --background-color-default-primary: var(--kv-primary, #005cc7);
  --background-color-default-secondary: var(--kv-neutral-6, #3f3f3f);
  --background-color-default-tertiary: transparent;
  --background-color-default-ghost: transparent;
  --background-color-default-danger: var(--kv-error, #e11900);
  --background-color-hover-primary: var(--kv-primary-dark, #103d73);
  --background-color-hover-secondary: var(--kv-neutral-5, #707070);
  --background-color-hover-tertiary: transparent;
  --background-color-hover-ghost: var(--kv-neutral-7, #2a2a2a);
  --background-color-hover-danger: var(--kv-error-dark, #c61600);
  --background-color-focus-primary: var(--kv-primary, #005cc7);
  --background-color-focus-secondary: var(--kv-neutral-6, #3f3f3f);
  --background-color-focus-tertiary: transparent;
  --background-color-focus-ghost: var(--kv-neutral-7, #2a2a2a);
  --background-color-focus-danger: var(--kv-error, #e11900);
  --background-color-disabled-primary: var(--kv-neutral-3, #ddd);
  --background-color-disabled-secondary: var(--kv-neutral-3, #ddd);
  --background-color-disabled-tertiary: transparent;
  --background-color-disabled-ghost: transparent;
  --background-color-disabled-danger: var(--kv-error-light, #f9d1cc);
  --background-color-active-primary: var(--kv-primary-dark, #103d73);
  --background-color-active-secondary: var(--kv-neutral-5, #707070);
  --background-color-active-tertiary: transparent;
  --background-color-active-ghost: var(--kv-neutral-7, #2a2a2a);
  --background-color-active-danger: var(--kv-error-dark, #c61600);
  --border-color-default-primary: var(--kv-primary, #005cc7);
  --border-color-default-secondary: var(--kv-neutral-6, #3f3f3f);
  --border-color-default-tertiary: var(--kv-neutral-0, #fff);
  --border-color-default-ghost: transparent;
  --border-color-default-danger: var(--kv-error, #e11900);
  --border-color-hover-primary: var(--kv-primary-dark, #103d73);
  --border-color-hover-secondary: var(--kv-neutral-5, #707070);
  --border-color-hover-tertiary: var(--kv-neutral-2, #e5e5e5);
  --border-color-hover-ghost: var(--kv-neutral-7, #2a2a2a);
  --border-color-hover-danger: var(--kv-error-dark, #c61600);
  --border-color-focus-primary: var(--kv-primary, #005cc7);
  --border-color-focus-secondary: var(--kv-neutral-0, #fff);
  --border-color-focus-tertiary: transparent;
  --border-color-focus-ghost: var(--kv-neutral-7, #2a2a2a);
  --border-color-focus-danger: transparent;
  --border-color-disabled-primary: var(--kv-neutral-3, #ddd);
  --border-color-disabled-secondary: var(--kv-neutral-3, #ddd);
  --border-color-disabled-tertiary: var(--kv-neutral-5, #707070);
  --border-color-disabled-ghost: transparent;
  --border-color-disabled-danger: var(--kv-error-light, #f9d1cc);
  --border-color-active-primary: var(--kv-primary-dark, #103d73);
  --border-color-active-secondary: var(--kv-neutral-5, #707070);
  --border-color-active-tertiary: var(--kv-neutral-2, #e5e5e5);
  --border-color-active-ghost: var(--kv-neutral-7, #2a2a2a);
  --border-color-active-danger: var(--kv-error-dark, #c61600);
  --button-height-large: 36px;
  --button-height-small: 28px;
  --button-padding-x-large: var(--kv-spacing-4x, 16px);
  --button-padding-x-small: var(--kv-spacing-3x, 12px);
}

.action-button {
  text-decoration: none;
  position: relative;
  user-select: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  box-sizing: border-box;
}
.action-button--type-primary {
  color: var(--text-color-default-primary);
  background: linear-gradient(45deg, var(--background-color-hover-primary) 50%, var(--background-color-default-primary) 50%);
  background-size: 350% 100%;
  background-repeat: no-repeat;
  background-color: var(--background-color-default-primary);
  background-position: right bottom;
  transition: background-position 0.5s ease-out, border-top-color 0.5s ease-out, border-right-color 0.5s ease-out, border-bottom-color 0.25s ease-in-out, border-left-color 0.25s ease-in-out;
  border: 1px solid var(--border-color-default-primary);
}
.action-button--type-primary ::slotted(kv-icon) {
  --icon-color: var(--text-color-default-primary);
}
.action-button--type-primary:hover:not(.action-button--disabled) {
  color: var(--text-color-hover-primary);
}
.action-button--type-primary:hover:not(.action-button--disabled) ::slotted(kv-icon) {
  --icon-color: var(--text-color-hover-primary);
}
.action-button--type-primary:focus:not(.action-button--disabled) {
  color: var(--text-color-focus-primary);
}
.action-button--type-primary:focus:not(.action-button--disabled) ::slotted(kv-icon) {
  --icon-color: var(--text-color-focus-primary);
}
.action-button--type-primary.action-button--disabled {
  color: var(--text-color-disabled-primary);
}
.action-button--type-primary.action-button--disabled ::slotted(kv-icon) {
  --icon-color: var(--text-color-disabled-primary);
}
.action-button--type-primary.action-button--active {
  color: var(--text-color-active-primary);
}
.action-button--type-primary.action-button--active ::slotted(kv-icon) {
  --icon-color: var(--text-color-active-primary);
}
.action-button--type-primary:hover:not(.action-button--disabled) {
  background-position: left top;
}
.action-button--type-primary:focus:not(.action-button--disabled) {
  background: var(--background-color-focus-primary);
}
.action-button--type-primary.action-button--disabled {
  background: var(--background-color-disabled-primary);
}
.action-button--type-primary.action-button--active {
  background: var(--background-color-active-primary);
}
.action-button--type-primary:hover:not(.action-button--disabled) {
  border-top-color: var(--border-color-hover-primary);
  border-right-color: var(--border-color-hover-primary);
  border-bottom-color: var(--border-color-hover-primary);
  border-left-color: var(--border-color-hover-primary);
}
.action-button--type-primary:focus:not(.action-button--disabled)::before {
  content: "";
  filter: blur(2px);
  position: absolute;
  z-index: -1;
  border: 1px solid var(--border-color-focus-primary);
}
.action-button--type-primary.action-button--disabled {
  border: 1px solid var(--border-color-disabled-primary);
}
.action-button--type-primary.action-button--active {
  border: 1px solid var(--border-color-active-primary);
}
.action-button--type-secondary {
  color: var(--text-color-default-secondary);
  background: linear-gradient(45deg, var(--background-color-hover-secondary) 50%, var(--background-color-default-secondary) 50%);
  background-size: 350% 100%;
  background-repeat: no-repeat;
  background-color: var(--background-color-default-secondary);
  background-position: right bottom;
  transition: background-position 0.5s ease-out, border-top-color 0.5s ease-out, border-right-color 0.5s ease-out, border-bottom-color 0.25s ease-in-out, border-left-color 0.25s ease-in-out;
  border: 1px solid var(--border-color-default-secondary);
}
.action-button--type-secondary ::slotted(kv-icon) {
  --icon-color: var(--text-color-default-secondary);
}
.action-button--type-secondary:hover:not(.action-button--disabled) {
  color: var(--text-color-hover-secondary);
}
.action-button--type-secondary:hover:not(.action-button--disabled) ::slotted(kv-icon) {
  --icon-color: var(--text-color-hover-secondary);
}
.action-button--type-secondary:focus:not(.action-button--disabled) {
  color: var(--text-color-focus-secondary);
}
.action-button--type-secondary:focus:not(.action-button--disabled) ::slotted(kv-icon) {
  --icon-color: var(--text-color-focus-secondary);
}
.action-button--type-secondary.action-button--disabled {
  color: var(--text-color-disabled-secondary);
}
.action-button--type-secondary.action-button--disabled ::slotted(kv-icon) {
  --icon-color: var(--text-color-disabled-secondary);
}
.action-button--type-secondary.action-button--active {
  color: var(--text-color-active-secondary);
}
.action-button--type-secondary.action-button--active ::slotted(kv-icon) {
  --icon-color: var(--text-color-active-secondary);
}
.action-button--type-secondary:hover:not(.action-button--disabled) {
  background-position: left top;
}
.action-button--type-secondary:focus:not(.action-button--disabled) {
  background: var(--background-color-focus-secondary);
}
.action-button--type-secondary.action-button--disabled {
  background: var(--background-color-disabled-secondary);
}
.action-button--type-secondary.action-button--active {
  background: var(--background-color-active-secondary);
}
.action-button--type-secondary:hover:not(.action-button--disabled) {
  border-top-color: var(--border-color-hover-secondary);
  border-right-color: var(--border-color-hover-secondary);
  border-bottom-color: var(--border-color-hover-secondary);
  border-left-color: var(--border-color-hover-secondary);
}
.action-button--type-secondary:focus:not(.action-button--disabled)::before {
  content: "";
  filter: blur(2px);
  position: absolute;
  z-index: -1;
  border: 1px solid var(--border-color-focus-secondary);
}
.action-button--type-secondary.action-button--disabled {
  border: 1px solid var(--border-color-disabled-secondary);
}
.action-button--type-secondary.action-button--active {
  border: 1px solid var(--border-color-active-secondary);
}
.action-button--type-tertiary {
  color: var(--text-color-default-tertiary);
  background: linear-gradient(45deg, var(--background-color-hover-tertiary) 50%, var(--background-color-default-tertiary) 50%);
  background-size: 350% 100%;
  background-repeat: no-repeat;
  background-color: var(--background-color-default-tertiary);
  background-position: right bottom;
  transition: background-position 0.5s ease-out, border-top-color 0.5s ease-out, border-right-color 0.5s ease-out, border-bottom-color 0.25s ease-in-out, border-left-color 0.25s ease-in-out;
  border: 1px solid var(--border-color-default-tertiary);
}
.action-button--type-tertiary ::slotted(kv-icon) {
  --icon-color: var(--text-color-default-tertiary);
}
.action-button--type-tertiary:hover:not(.action-button--disabled) {
  color: var(--text-color-hover-tertiary);
}
.action-button--type-tertiary:hover:not(.action-button--disabled) ::slotted(kv-icon) {
  --icon-color: var(--text-color-hover-tertiary);
}
.action-button--type-tertiary:focus:not(.action-button--disabled) {
  color: var(--text-color-focus-tertiary);
}
.action-button--type-tertiary:focus:not(.action-button--disabled) ::slotted(kv-icon) {
  --icon-color: var(--text-color-focus-tertiary);
}
.action-button--type-tertiary.action-button--disabled {
  color: var(--text-color-disabled-tertiary);
}
.action-button--type-tertiary.action-button--disabled ::slotted(kv-icon) {
  --icon-color: var(--text-color-disabled-tertiary);
}
.action-button--type-tertiary.action-button--active {
  color: var(--text-color-active-tertiary);
}
.action-button--type-tertiary.action-button--active ::slotted(kv-icon) {
  --icon-color: var(--text-color-active-tertiary);
}
.action-button--type-tertiary:hover:not(.action-button--disabled) {
  background-position: left top;
}
.action-button--type-tertiary:focus:not(.action-button--disabled) {
  background: var(--background-color-focus-tertiary);
}
.action-button--type-tertiary.action-button--disabled {
  background: var(--background-color-disabled-tertiary);
}
.action-button--type-tertiary.action-button--active {
  background: var(--background-color-active-tertiary);
}
.action-button--type-tertiary:hover:not(.action-button--disabled) {
  border-top-color: var(--border-color-hover-tertiary);
  border-right-color: var(--border-color-hover-tertiary);
  border-bottom-color: var(--border-color-hover-tertiary);
  border-left-color: var(--border-color-hover-tertiary);
}
.action-button--type-tertiary:focus:not(.action-button--disabled)::before {
  content: "";
  filter: blur(2px);
  position: absolute;
  z-index: -1;
  border: 1px solid var(--border-color-focus-tertiary);
}
.action-button--type-tertiary.action-button--disabled {
  border: 1px solid var(--border-color-disabled-tertiary);
}
.action-button--type-tertiary.action-button--active {
  border: 1px solid var(--border-color-active-tertiary);
}
.action-button--type-tertiary.action-button--loading {
  border-color: transparent;
  overflow: hidden;
}
.action-button--type-tertiary.action-button--loading::before {
  content: "";
  background-image: conic-gradient(transparent, var(--kv-neutral-6, #3f3f3f), transparent);
  width: 150%;
  aspect-ratio: 1/1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  animation: loadingrotate 3s infinite linear;
  border-radius: inherit;
  z-index: -1;
}
.action-button--type-ghost {
  color: var(--text-color-default-ghost);
  background: linear-gradient(45deg, var(--background-color-hover-ghost) 50%, var(--background-color-default-ghost) 50%);
  background-size: 350% 100%;
  background-repeat: no-repeat;
  background-color: var(--background-color-default-ghost);
  background-position: right bottom;
  transition: background-position 0.5s ease-out, border-top-color 0.5s ease-out, border-right-color 0.5s ease-out, border-bottom-color 0.25s ease-in-out, border-left-color 0.25s ease-in-out;
  border: 1px solid var(--border-color-default-ghost);
}
.action-button--type-ghost ::slotted(kv-icon) {
  --icon-color: var(--text-color-default-ghost);
}
.action-button--type-ghost:hover:not(.action-button--disabled) {
  color: var(--text-color-hover-ghost);
}
.action-button--type-ghost:hover:not(.action-button--disabled) ::slotted(kv-icon) {
  --icon-color: var(--text-color-hover-ghost);
}
.action-button--type-ghost:focus:not(.action-button--disabled) {
  color: var(--text-color-focus-ghost);
}
.action-button--type-ghost:focus:not(.action-button--disabled) ::slotted(kv-icon) {
  --icon-color: var(--text-color-focus-ghost);
}
.action-button--type-ghost.action-button--disabled {
  color: var(--text-color-disabled-ghost);
}
.action-button--type-ghost.action-button--disabled ::slotted(kv-icon) {
  --icon-color: var(--text-color-disabled-ghost);
}
.action-button--type-ghost.action-button--active {
  color: var(--text-color-active-ghost);
}
.action-button--type-ghost.action-button--active ::slotted(kv-icon) {
  --icon-color: var(--text-color-active-ghost);
}
.action-button--type-ghost:hover:not(.action-button--disabled) {
  background-position: left top;
}
.action-button--type-ghost:focus:not(.action-button--disabled) {
  background: var(--background-color-focus-ghost);
}
.action-button--type-ghost.action-button--disabled {
  background: var(--background-color-disabled-ghost);
}
.action-button--type-ghost.action-button--active {
  background: var(--background-color-active-ghost);
}
.action-button--type-ghost:hover:not(.action-button--disabled) {
  border-top-color: var(--border-color-hover-ghost);
  border-right-color: var(--border-color-hover-ghost);
  border-bottom-color: var(--border-color-hover-ghost);
  border-left-color: var(--border-color-hover-ghost);
}
.action-button--type-ghost:focus:not(.action-button--disabled)::before {
  content: "";
  filter: blur(2px);
  position: absolute;
  z-index: -1;
  border: 1px solid var(--border-color-focus-ghost);
}
.action-button--type-ghost.action-button--disabled {
  border: 1px solid var(--border-color-disabled-ghost);
}
.action-button--type-ghost.action-button--active {
  border: 1px solid var(--border-color-active-ghost);
}
.action-button--type-danger {
  color: var(--text-color-default-danger);
  background: linear-gradient(45deg, var(--background-color-hover-danger) 50%, var(--background-color-default-danger) 50%);
  background-size: 350% 100%;
  background-repeat: no-repeat;
  background-color: var(--background-color-default-danger);
  background-position: right bottom;
  transition: background-position 0.5s ease-out, border-top-color 0.5s ease-out, border-right-color 0.5s ease-out, border-bottom-color 0.25s ease-in-out, border-left-color 0.25s ease-in-out;
  border: 1px solid var(--border-color-default-danger);
}
.action-button--type-danger ::slotted(kv-icon) {
  --icon-color: var(--text-color-default-danger);
}
.action-button--type-danger:hover:not(.action-button--disabled) {
  color: var(--text-color-hover-danger);
}
.action-button--type-danger:hover:not(.action-button--disabled) ::slotted(kv-icon) {
  --icon-color: var(--text-color-hover-danger);
}
.action-button--type-danger:focus:not(.action-button--disabled) {
  color: var(--text-color-focus-danger);
}
.action-button--type-danger:focus:not(.action-button--disabled) ::slotted(kv-icon) {
  --icon-color: var(--text-color-focus-danger);
}
.action-button--type-danger.action-button--disabled {
  color: var(--text-color-disabled-danger);
}
.action-button--type-danger.action-button--disabled ::slotted(kv-icon) {
  --icon-color: var(--text-color-disabled-danger);
}
.action-button--type-danger.action-button--active {
  color: var(--text-color-active-danger);
}
.action-button--type-danger.action-button--active ::slotted(kv-icon) {
  --icon-color: var(--text-color-active-danger);
}
.action-button--type-danger:hover:not(.action-button--disabled) {
  background-position: left top;
}
.action-button--type-danger:focus:not(.action-button--disabled) {
  background: var(--background-color-focus-danger);
}
.action-button--type-danger.action-button--disabled {
  background: var(--background-color-disabled-danger);
}
.action-button--type-danger.action-button--active {
  background: var(--background-color-active-danger);
}
.action-button--type-danger:hover:not(.action-button--disabled) {
  border-top-color: var(--border-color-hover-danger);
  border-right-color: var(--border-color-hover-danger);
  border-bottom-color: var(--border-color-hover-danger);
  border-left-color: var(--border-color-hover-danger);
}
.action-button--type-danger:focus:not(.action-button--disabled)::before {
  content: "";
  filter: blur(2px);
  position: absolute;
  z-index: -1;
  border: 1px solid var(--border-color-focus-danger);
}
.action-button--type-danger.action-button--disabled {
  border: 1px solid var(--border-color-disabled-danger);
}
.action-button--type-danger.action-button--active {
  border: 1px solid var(--border-color-active-danger);
}
.action-button--size-small {
  height: var(--button-height-small);
  padding: 0 var(--button-padding-x-small);
}
.action-button--size-large {
  height: var(--button-height-large);
  padding: 0 var(--button-padding-x-large);
}
.action-button--disabled {
  cursor: not-allowed;
  user-select: none;
}

@keyframes loadingrotate {
  /* Use 0% instead for anticlockwise */
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}