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

Kelvin UI Components

/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** TODO: CODE/CONSOLE **/
@property --rotation {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate-border {
  to {
    --rotation: 360deg;
  }
}
/**
* Design Tokens - Auto-generated by Style Dictionary
* Do not edit manually - run `pnpm tokens:build` to regenerate
*/
kv-dropdown-base:not(.hydrated) > [slot=list] {
  display: none;
}

/* stylelint-disable csstools/value-no-unknown-custom-properties */
/* stylelint-enable csstools/value-no-unknown-custom-properties */
:host {
  /**
   * @prop --icon-color-default-primary: Icon color when state is default and theme is primary.
   * @prop --icon-color-default-secondary: Icon color when state is default and theme is secondary.
   * @prop --icon-color-default-tertiary: Icon color when state is default and theme is tertiary.
   * @prop --icon-color-default-text: Icon color when state is default and theme is text.
   * @prop --icon-color-default-danger: Icon color when state is default and theme is danger.
   * @prop --icon-color-hover-primary: Icon color when state is hover and theme is primary.
   * @prop --icon-color-hover-secondary: Icon color when state is hover and theme is secondary.
   * @prop --icon-color-hover-tertiary: Icon color when state is hover and theme is tertiary.
   * @prop --icon-color-hover-text: Icon color when state is hover and theme is text.
   * @prop --icon-color-hover-danger: Icon color when state is hover and theme is danger.
   * @prop --icon-color-focus-primary: Icon color when state is focus and theme is primary.
   * @prop --icon-color-focus-secondary: Icon color when state is focus and theme is secondary.
   * @prop --icon-color-focus-tertiary: Icon color when state is focus and theme is tertiary.
   * @prop --icon-color-focus-text: Icon color when state is focus and theme is text.
   * @prop --icon-color-focus-danger: Icon color when state is focus and theme is danger.
   * @prop --icon-color-disabled-primary: Icon color when state is disabled and theme is primary.
   * @prop --icon-color-disabled-secondary: Icon color when state is disabled and theme is secondary.
   * @prop --icon-color-disabled-tertiary: Icon color when state is disabled and theme is tertiary.
   * @prop --icon-color-disabled-text: Icon color when state is disabled and theme is text.
   * @prop --icon-color-disabled-danger: Icon color when state is disabled and theme is danger.
   * @prop --icon-color-active-primary: Icon color when state is active and theme is primary.
   * @prop --icon-color-active-secondary: Icon color when state is active and theme is secondary.
   * @prop --icon-color-active-tertiary: Icon color when state is active and theme is tertiary.
   * @prop --icon-color-active-text: Icon color when state is active and theme is text.
   * @prop --icon-color-active-danger: Icon color when state is active and theme is danger.
   * @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-text: Text color when state is default and theme is text.
   * @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-text: Text color when state is hover and theme is text.
   * @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-text: Text color when state is focus and theme is text.
   * @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-text: Text color when state is disabled and theme is text.
   * @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-text: Text color when state is active and theme is text.
   * @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-text: Background color when state is default and theme is text.
   * @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-text: Background color when state is hover and theme is text.
   * @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-text: Background color when state is focus and theme is text.
   * @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-text: Background color when state is disabled and theme is text.
   * @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-text: Background color when state is active and theme is text.
   * @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-text: Border color when state is default and theme is text.
   * @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-text: Border color when state is hover and theme is text.
   * @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-text: Border color when state is focus and theme is text.
   * @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-text: Border color when state is disabled and theme is text.
   * @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-text: Border color when state is active and theme is text.
   * @prop --border-color-active-danger: Border color when state is active and theme is danger.
   * @prop --button-gap-large: Button's gap between elements when size is large.
   * @prop --button-gap-small: Button's gap between elements when size is small.
   * @prop --button-height-large: Button's height when size is large.
   * @prop --button-height-small: Button's height when size is 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.
   * @prop --button-padding-y-large: Button's vertical padding when size is large.
   * @prop --button-padding-y-small: Button's vertical padding when size is small.
   * @prop --button-border-thickness: Button's border thickness.
   * @prop --button-border-radius-large: Button's border radius when size is large.
   * @prop --button-border-radius-small: Button's border radius when size is small.
   * @prop --button-icon-size-primary-large: Icon size when theme is primary and size is large.
   * @prop --button-icon-size-primary-small: Icon size when theme is primary and size is small.
   * @prop --button-icon-size-secondary-large: Icon size when theme is secondary and size is large.
   * @prop --button-icon-size-secondary-small: Icon size when theme is secondary and size is small.
   * @prop --button-icon-size-tertiary-large: Icon size when theme is tertiary and size is large.
   * @prop --button-icon-size-tertiary-small: Icon size when theme is tertiary and size is small.
   * @prop --button-icon-size-text-large: Icon size when theme is text and size is large.
   * @prop --button-icon-size-text-small: Icon size when theme is text and size is small.
   * @prop --button-icon-size-danger-large: Icon size when theme is danger and size is large.
   * @prop --button-icon-size-danger-small: Icon size when theme is danger and size is small.
   */
  --_icon-color-default-primary: var(--button-primary-icon-color-default);
  --_icon-color-default-secondary: var(--button-secondary-icon-color-default);
  --_icon-color-default-tertiary: var(--button-tertiary-icon-color-default);
  --_icon-color-default-text: var(--button-text-icon-color-default);
  --_icon-color-default-danger: var(--button-danger-icon-color-default);
  --_icon-color-hover-primary: var(--button-primary-icon-color-default);
  --_icon-color-hover-secondary: var(--button-secondary-icon-color-subtle);
  --_icon-color-hover-tertiary: var(--button-tertiary-icon-color-subtle);
  --_icon-color-hover-text: var(--button-text-icon-color-default);
  --_icon-color-hover-danger: var(--button-danger-icon-color-default);
  --_icon-color-focus-primary: var(--button-primary-icon-color-default);
  --_icon-color-focus-secondary: var(--button-secondary-icon-color-default);
  --_icon-color-focus-tertiary: var(--button-tertiary-icon-color-default);
  --_icon-color-focus-text: var(--button-text-icon-color-default);
  --_icon-color-focus-danger: var(--button-danger-icon-color-default);
  --_icon-color-disabled-primary: var(--button-primary-icon-color-disabled);
  --_icon-color-disabled-secondary: var(--button-secondary-icon-color-disabled);
  --_icon-color-disabled-tertiary: var(--button-tertiary-icon-color-disabled);
  --_icon-color-disabled-text: var(--button-text-icon-color-disabled);
  --_icon-color-disabled-danger: var(--button-danger-icon-color-disabled);
  --_icon-color-active-primary: var(--button-primary-icon-color-default);
  --_icon-color-active-secondary: var(--button-secondary-icon-color-subtle);
  --_icon-color-active-tertiary: var(--button-tertiary-icon-color-subtle);
  --_icon-color-active-text: var(--button-text-icon-color-default);
  --_icon-color-active-danger: var(--button-danger-icon-color-default);
  --_text-color-default-primary: var(--button-primary-label-default);
  --_text-color-default-secondary: var(--button-secondary-label-default);
  --_text-color-default-tertiary: var(--button-tertiary-label-default);
  --_text-color-default-text: var(--button-text-label-default);
  --_text-color-default-danger: var(--button-danger-label-default);
  --_text-color-hover-primary: var(--button-primary-label-default);
  --_text-color-hover-secondary: var(--button-secondary-label-subtle);
  --_text-color-hover-tertiary: var(--button-tertiary-label-subtle);
  --_text-color-hover-text: var(--button-text-label-default);
  --_text-color-hover-danger: var(--button-danger-label-default);
  --_text-color-focus-primary: var(--button-primary-label-default);
  --_text-color-focus-secondary: var(--button-secondary-label-default);
  --_text-color-focus-tertiary: var(--button-tertiary-label-default);
  --_text-color-focus-text: var(--button-text-label-default);
  --_text-color-focus-danger: var(--button-danger-label-default);
  --_text-color-disabled-primary: var(--button-primary-label-disabled);
  --_text-color-disabled-secondary: var(--button-secondary-label-disabled);
  --_text-color-disabled-tertiary: var(--button-tertiary-label-disabled);
  --_text-color-disabled-text: var(--button-text-label-disabled);
  --_text-color-disabled-danger: var(--button-danger-label-disabled);
  --_text-color-active-primary: var(--button-primary-label-default);
  --_text-color-active-secondary: var(--button-secondary-label-subtle);
  --_text-color-active-tertiary: var(--button-tertiary-label-subtle);
  --_text-color-active-text: var(--button-text-label-default);
  --_text-color-active-danger: var(--button-danger-label-default);
  --_background-color-default-primary: var(--button-primary-background-default);
  --_background-color-default-secondary: var(--transparent);
  --_background-color-default-tertiary: var(--transparent);
  --_background-color-default-text: var(--transparent);
  --_background-color-default-danger: var(--button-danger-background-default);
  --_background-color-hover-primary: var(--button-primary-background-hover);
  --_background-color-hover-secondary: var(--button-secondary-background-hover);
  --_background-color-hover-tertiary: var(--button-tertiary-background-hover);
  --_background-color-hover-text: var(--transparent);
  --_background-color-hover-danger: var(--button-danger-background-hover);
  --_background-color-focus-primary: var(--button-primary-background-default);
  --_background-color-focus-secondary: var(--transparent);
  --_background-color-focus-tertiary: var(--transparent);
  --_background-color-focus-text: var(--transparent);
  --_background-color-focus-danger: var(--button-danger-background-default);
  --_background-color-disabled-primary: var(--button-primary-background-disabled);
  --_background-color-disabled-secondary: var(--button-secondary-background-disabled);
  --_background-color-disabled-tertiary: var(--button-tertiary-background-disabled);
  --_background-color-disabled-text: var(--transparent);
  --_background-color-disabled-danger: var(--button-danger-background-disabled);
  --_background-color-active-primary: var(--button-primary-background-pressed);
  --_background-color-active-secondary: var(--button-secondary-background-pressed);
  --_background-color-active-tertiary: var(--button-tertiary-background-pressed);
  --_background-color-active-text: var(--transparent);
  --_background-color-active-danger: var(--button-danger-background-pressed);
  --_border-color-default-primary: var(--button-primary-background-default);
  --_border-color-default-secondary: var(--button-secondary-border-color-default);
  --_border-color-default-tertiary: var(--transparent);
  --_border-color-default-text: var(--transparent);
  --_border-color-default-danger: var(--button-danger-background-default);
  --_border-color-hover-primary: var(--button-primary-background-hover);
  --_border-color-hover-secondary: var(--button-secondary-border-color-default);
  --_border-color-hover-tertiary: var(--button-tertiary-background-hover);
  --_border-color-hover-text: var(--transparent);
  --_border-color-hover-danger: var(--button-danger-background-hover);
  --_border-color-focus-primary: var(--button-primary-background-default);
  --_border-color-focus-secondary: var(--button-secondary-border-color-default);
  --_border-color-focus-tertiary: var(--transparent);
  --_border-color-focus-text: var(--transparent);
  --_border-color-focus-danger: var(--button-danger-background-default);
  --_border-color-disabled-primary: var(--button-primary-background-disabled);
  --_border-color-disabled-secondary: var(--button-secondary-background-disabled);
  --_border-color-disabled-tertiary: var(--button-tertiary-background-disabled);
  --_border-color-disabled-text: var(--transparent);
  --_border-color-disabled-danger: var(--button-danger-background-disabled);
  --_border-color-active-primary: var(--button-primary-background-pressed);
  --_border-color-active-secondary: var(--button-secondary-border-color-pressed);
  --_border-color-active-tertiary: var(--button-tertiary-background-pressed);
  --_border-color-active-text: var(--transparent);
  --_border-color-active-danger: var(--button-danger-background-pressed);
  --button-gap-large: var(--button-gap-regular);
  --button-gap-small: var(--button-gap-compact);
  --button-height-large: var(--button-height-regular);
  --button-height-small: var(--button-height-compact);
  --button-padding-x-large: var(--button-padding-x-regular);
  --button-padding-y-large: var(--button-padding-y-regular);
  --button-padding-x-small: var(--button-padding-x-compact);
  --button-padding-y-small: var(--button-padding-y-compact);
  --button-border-thickness: var(--button-secondary-border-thickness-default);
  --button-border-radius-large: var(--button-radius-regular);
  --button-border-radius-small: var(--button-radius-compact);
  --button-icon-size-primary-large: var(--button-primary-icon-size-regular);
  --button-icon-size-primary-small: var(--button-primary-icon-size-compact);
  --button-icon-size-secondary-large: var(--button-secondary-icon-size-regular);
  --button-icon-size-secondary-small: var(--button-secondary-icon-size-compact);
  --button-icon-size-tertiary-large: var(--button-tertiary-icon-size-regular);
  --button-icon-size-tertiary-small: var(--button-tertiary-icon-size-compact);
  --button-icon-size-text-large: var(--button-text-icon-size-regular);
  --button-icon-size-text-small: var(--button-text-icon-size-regular);
  --button-icon-size-danger-large: var(--button-danger-icon-size-regular);
  --button-icon-size-danger-small: var(--button-danger-icon-size-compact);
}

.action-button {
  text-decoration: none;
  position: relative;
  user-select: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}
.action-button--size-small {
  border-radius: var(--button-border-radius-small);
  gap: var(--button-gap-small);
}
.action-button--size-large {
  border-radius: var(--button-border-radius-large);
  gap: var(--button-gap-large);
}
.action-button--type-primary {
  color: var(--text-color-default-primary, var(--_text-color-default-primary));
  background: linear-gradient(45deg, var(--background-color-hover-primary, var(--_background-color-hover-primary)) 50%, var(--background-color-default-primary, var(--_background-color-default-primary)) 50%);
  background-size: 350% 100%;
  background-repeat: no-repeat;
  background-color: var(--background-color-default-primary, 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: var(--button-border-thickness) solid var(--border-color-default-primary, var(--_border-color-default-primary));
}
.action-button--type-primary ::slotted(kv-icon) {
  --icon-color: var(--icon-color-default-primary, var(--_icon-color-default-primary));
}
.action-button--type-primary:hover:not(.action-button--disabled) {
  color: var(--text-color-hover-primary, var(--_text-color-hover-primary));
}
.action-button--type-primary:hover:not(.action-button--disabled) ::slotted(kv-icon) {
  --icon-color: var(--icon-color-hover-primary, var(--_icon-color-hover-primary));
}
.action-button--type-primary:focus:not(.action-button--disabled):not(.action-button--active) {
  color: var(--text-color-focus-primary, var(--_text-color-focus-primary));
}
.action-button--type-primary:focus:not(.action-button--disabled):not(.action-button--active) ::slotted(kv-icon) {
  --icon-color: var(--icon-color-focus-primary, var(--_icon-color-focus-primary));
}
.action-button--type-primary.action-button--disabled {
  color: var(--text-color-disabled-primary, var(--_text-color-disabled-primary));
}
.action-button--type-primary.action-button--disabled ::slotted(kv-icon) {
  --icon-color: var(--icon-color-disabled-primary, var(--_icon-color-disabled-primary));
}
.action-button--type-primary:active:not(.action-button--disabled), .action-button--type-primary.action-button--active {
  color: var(--text-color-active-primary, var(--_text-color-active-primary));
}
.action-button--type-primary:active:not(.action-button--disabled) ::slotted(kv-icon), .action-button--type-primary.action-button--active ::slotted(kv-icon) {
  --icon-color: var(--icon-color-active-primary, var(--_icon-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):not(.action-button--active) {
  background: var(--background-color-focus-primary, var(--_background-color-focus-primary));
}
.action-button--type-primary.action-button--disabled {
  background: var(--background-color-disabled-primary, var(--_background-color-disabled-primary));
}
.action-button--type-primary:active:not(.action-button--disabled), .action-button--type-primary.action-button--active {
  background: var(--background-color-active-primary, var(--_background-color-active-primary));
}
.action-button--type-primary:hover:not(.action-button--disabled) {
  border-top-color: var(--border-color-hover-primary, var(--_border-color-hover-primary));
  border-right-color: var(--border-color-hover-primary, var(--_border-color-hover-primary));
  border-bottom-color: var(--border-color-hover-primary, var(--_border-color-hover-primary));
  border-left-color: var(--border-color-hover-primary, var(--_border-color-hover-primary));
}
.action-button--type-primary:focus:not(.action-button--disabled):not(.action-button--active)::before {
  content: "";
  filter: blur(2px);
  position: absolute;
  z-index: -1;
  border: var(--button-border-thickness) solid var(--border-color-focus-primary, var(--_border-color-focus-primary));
}
.action-button--type-primary.action-button--disabled {
  border: var(--button-border-thickness) solid var(--border-color-disabled-primary, var(--_border-color-disabled-primary));
}
.action-button--type-primary:active:not(.action-button--disabled), .action-button--type-primary.action-button--active {
  border: var(--button-border-thickness) solid var(--border-color-active-primary, var(--_border-color-active-primary));
}
.action-button--type-primary.action-button--size-small {
  height: var(--button-height-small);
  padding: var(--button-padding-y-small, 0) var(--button-padding-x-small);
}
.action-button--type-primary.action-button--size-small ::slotted(kv-icon) {
  --icon-width: var(--button-icon-size-primary-small);
  --icon-height: var(--button-icon-size-primary-small);
}
.action-button--type-primary.action-button--size-large {
  height: var(--button-height-large);
  padding: var(--button-padding-y-large, 0) var(--button-padding-x-large);
}
.action-button--type-primary.action-button--size-large ::slotted(kv-icon) {
  --icon-width: var(--button-icon-size-primary-large);
  --icon-height: var(--button-icon-size-primary-large);
}
.action-button--type-secondary {
  color: var(--text-color-default-secondary, var(--_text-color-default-secondary));
  background: linear-gradient(45deg, var(--background-color-hover-secondary, var(--_background-color-hover-secondary)) 50%, var(--background-color-default-secondary, var(--_background-color-default-secondary)) 50%);
  background-size: 350% 100%;
  background-repeat: no-repeat;
  background-color: var(--background-color-default-secondary, 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: var(--button-border-thickness) solid var(--border-color-default-secondary, var(--_border-color-default-secondary));
}
.action-button--type-secondary ::slotted(kv-icon) {
  --icon-color: var(--icon-color-default-secondary, var(--_icon-color-default-secondary));
}
.action-button--type-secondary:hover:not(.action-button--disabled) {
  color: var(--text-color-hover-secondary, var(--_text-color-hover-secondary));
}
.action-button--type-secondary:hover:not(.action-button--disabled) ::slotted(kv-icon) {
  --icon-color: var(--icon-color-hover-secondary, var(--_icon-color-hover-secondary));
}
.action-button--type-secondary:focus:not(.action-button--disabled):not(.action-button--active) {
  color: var(--text-color-focus-secondary, var(--_text-color-focus-secondary));
}
.action-button--type-secondary:focus:not(.action-button--disabled):not(.action-button--active) ::slotted(kv-icon) {
  --icon-color: var(--icon-color-focus-secondary, var(--_icon-color-focus-secondary));
}
.action-button--type-secondary.action-button--disabled {
  color: var(--text-color-disabled-secondary, var(--_text-color-disabled-secondary));
}
.action-button--type-secondary.action-button--disabled ::slotted(kv-icon) {
  --icon-color: var(--icon-color-disabled-secondary, var(--_icon-color-disabled-secondary));
}
.action-button--type-secondary:active:not(.action-button--disabled), .action-button--type-secondary.action-button--active {
  color: var(--text-color-active-secondary, var(--_text-color-active-secondary));
}
.action-button--type-secondary:active:not(.action-button--disabled) ::slotted(kv-icon), .action-button--type-secondary.action-button--active ::slotted(kv-icon) {
  --icon-color: var(--icon-color-active-secondary, var(--_icon-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):not(.action-button--active) {
  background: var(--background-color-focus-secondary, var(--_background-color-focus-secondary));
}
.action-button--type-secondary.action-button--disabled {
  background: var(--background-color-disabled-secondary, var(--_background-color-disabled-secondary));
}
.action-button--type-secondary:active:not(.action-button--disabled), .action-button--type-secondary.action-button--active {
  background: var(--background-color-active-secondary, var(--_background-color-active-secondary));
}
.action-button--type-secondary:hover:not(.action-button--disabled) {
  border-top-color: var(--border-color-hover-secondary, var(--_border-color-hover-secondary));
  border-right-color: var(--border-color-hover-secondary, var(--_border-color-hover-secondary));
  border-bottom-color: var(--border-color-hover-secondary, var(--_border-color-hover-secondary));
  border-left-color: var(--border-color-hover-secondary, var(--_border-color-hover-secondary));
}
.action-button--type-secondary:focus:not(.action-button--disabled):not(.action-button--active)::before {
  content: "";
  filter: blur(2px);
  position: absolute;
  z-index: -1;
  border: var(--button-border-thickness) solid var(--border-color-focus-secondary, var(--_border-color-focus-secondary));
}
.action-button--type-secondary.action-button--disabled {
  border: var(--button-border-thickness) solid var(--border-color-disabled-secondary, var(--_border-color-disabled-secondary));
}
.action-button--type-secondary:active:not(.action-button--disabled), .action-button--type-secondary.action-button--active {
  border: var(--button-border-thickness) solid var(--border-color-active-secondary, var(--_border-color-active-secondary));
}
.action-button--type-secondary.action-button--size-small {
  height: var(--button-height-small);
  padding: var(--button-padding-y-small, 0) var(--button-padding-x-small);
}
.action-button--type-secondary.action-button--size-small ::slotted(kv-icon) {
  --icon-width: var(--button-icon-size-secondary-small);
  --icon-height: var(--button-icon-size-secondary-small);
}
.action-button--type-secondary.action-button--size-large {
  height: var(--button-height-large);
  padding: var(--button-padding-y-large, 0) var(--button-padding-x-large);
}
.action-button--type-secondary.action-button--size-large ::slotted(kv-icon) {
  --icon-width: var(--button-icon-size-secondary-large);
  --icon-height: var(--button-icon-size-secondary-large);
}
.action-button--type-tertiary {
  color: var(--text-color-default-tertiary, var(--_text-color-default-tertiary));
  background: linear-gradient(45deg, var(--background-color-hover-tertiary, var(--_background-color-hover-tertiary)) 50%, var(--background-color-default-tertiary, var(--_background-color-default-tertiary)) 50%);
  background-size: 350% 100%;
  background-repeat: no-repeat;
  background-color: var(--background-color-default-tertiary, 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: var(--button-border-thickness) solid var(--border-color-default-tertiary, var(--_border-color-default-tertiary));
}
.action-button--type-tertiary ::slotted(kv-icon) {
  --icon-color: var(--icon-color-default-tertiary, var(--_icon-color-default-tertiary));
}
.action-button--type-tertiary:hover:not(.action-button--disabled) {
  color: var(--text-color-hover-tertiary, var(--_text-color-hover-tertiary));
}
.action-button--type-tertiary:hover:not(.action-button--disabled) ::slotted(kv-icon) {
  --icon-color: var(--icon-color-hover-tertiary, var(--_icon-color-hover-tertiary));
}
.action-button--type-tertiary:focus:not(.action-button--disabled):not(.action-button--active) {
  color: var(--text-color-focus-tertiary, var(--_text-color-focus-tertiary));
}
.action-button--type-tertiary:focus:not(.action-button--disabled):not(.action-button--active) ::slotted(kv-icon) {
  --icon-color: var(--icon-color-focus-tertiary, var(--_icon-color-focus-tertiary));
}
.action-button--type-tertiary.action-button--disabled {
  color: var(--text-color-disabled-tertiary, var(--_text-color-disabled-tertiary));
}
.action-button--type-tertiary.action-button--disabled ::slotted(kv-icon) {
  --icon-color: var(--icon-color-disabled-tertiary, var(--_icon-color-disabled-tertiary));
}
.action-button--type-tertiary:active:not(.action-button--disabled), .action-button--type-tertiary.action-button--active {
  color: var(--text-color-active-tertiary, var(--_text-color-active-tertiary));
}
.action-button--type-tertiary:active:not(.action-button--disabled) ::slotted(kv-icon), .action-button--type-tertiary.action-button--active ::slotted(kv-icon) {
  --icon-color: var(--icon-color-active-tertiary, var(--_icon-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):not(.action-button--active) {
  background: var(--background-color-focus-tertiary, var(--_background-color-focus-tertiary));
}
.action-button--type-tertiary.action-button--disabled {
  background: var(--background-color-disabled-tertiary, var(--_background-color-disabled-tertiary));
}
.action-button--type-tertiary:active:not(.action-button--disabled), .action-button--type-tertiary.action-button--active {
  background: var(--background-color-active-tertiary, var(--_background-color-active-tertiary));
}
.action-button--type-tertiary:hover:not(.action-button--disabled) {
  border-top-color: var(--border-color-hover-tertiary, var(--_border-color-hover-tertiary));
  border-right-color: var(--border-color-hover-tertiary, var(--_border-color-hover-tertiary));
  border-bottom-color: var(--border-color-hover-tertiary, var(--_border-color-hover-tertiary));
  border-left-color: var(--border-color-hover-tertiary, var(--_border-color-hover-tertiary));
}
.action-button--type-tertiary:focus:not(.action-button--disabled):not(.action-button--active)::before {
  content: "";
  filter: blur(2px);
  position: absolute;
  z-index: -1;
  border: var(--button-border-thickness) solid var(--border-color-focus-tertiary, var(--_border-color-focus-tertiary));
}
.action-button--type-tertiary.action-button--disabled {
  border: var(--button-border-thickness) solid var(--border-color-disabled-tertiary, var(--_border-color-disabled-tertiary));
}
.action-button--type-tertiary:active:not(.action-button--disabled), .action-button--type-tertiary.action-button--active {
  border: var(--button-border-thickness) solid var(--border-color-active-tertiary, 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(--background-surface-skeleton-base), 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-tertiary.action-button--size-small {
  height: var(--button-height-small);
  padding: var(--button-padding-y-small, 0) var(--button-padding-x-small);
}
.action-button--type-tertiary.action-button--size-small ::slotted(kv-icon) {
  --icon-width: var(--button-icon-size-tertiary-small);
  --icon-height: var(--button-icon-size-tertiary-small);
}
.action-button--type-tertiary.action-button--size-large {
  height: var(--button-height-large);
  padding: var(--button-padding-y-large, 0) var(--button-padding-x-large);
}
.action-button--type-tertiary.action-button--size-large ::slotted(kv-icon) {
  --icon-width: var(--button-icon-size-tertiary-large);
  --icon-height: var(--button-icon-size-tertiary-large);
}
.action-button--type-text {
  color: var(--text-color-default-text, var(--_text-color-default-text));
  background: linear-gradient(45deg, var(--background-color-hover-text, var(--_background-color-hover-text)) 50%, var(--background-color-default-text, var(--_background-color-default-text)) 50%);
  background-size: 350% 100%;
  background-repeat: no-repeat;
  background-color: var(--background-color-default-text, var(--_background-color-default-text));
  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: var(--button-border-thickness) solid var(--border-color-default-text, var(--_border-color-default-text));
}
.action-button--type-text ::slotted(kv-icon) {
  --icon-color: var(--icon-color-default-text, var(--_icon-color-default-text));
}
.action-button--type-text:hover:not(.action-button--disabled) {
  color: var(--text-color-hover-text, var(--_text-color-hover-text));
}
.action-button--type-text:hover:not(.action-button--disabled) ::slotted(kv-icon) {
  --icon-color: var(--icon-color-hover-text, var(--_icon-color-hover-text));
}
.action-button--type-text:focus:not(.action-button--disabled):not(.action-button--active) {
  color: var(--text-color-focus-text, var(--_text-color-focus-text));
}
.action-button--type-text:focus:not(.action-button--disabled):not(.action-button--active) ::slotted(kv-icon) {
  --icon-color: var(--icon-color-focus-text, var(--_icon-color-focus-text));
}
.action-button--type-text.action-button--disabled {
  color: var(--text-color-disabled-text, var(--_text-color-disabled-text));
}
.action-button--type-text.action-button--disabled ::slotted(kv-icon) {
  --icon-color: var(--icon-color-disabled-text, var(--_icon-color-disabled-text));
}
.action-button--type-text:active:not(.action-button--disabled), .action-button--type-text.action-button--active {
  color: var(--text-color-active-text, var(--_text-color-active-text));
}
.action-button--type-text:active:not(.action-button--disabled) ::slotted(kv-icon), .action-button--type-text.action-button--active ::slotted(kv-icon) {
  --icon-color: var(--icon-color-active-text, var(--_icon-color-active-text));
}
.action-button--type-text:hover:not(.action-button--disabled) {
  background-position: left top;
}
.action-button--type-text:focus:not(.action-button--disabled):not(.action-button--active) {
  background: var(--background-color-focus-text, var(--_background-color-focus-text));
}
.action-button--type-text.action-button--disabled {
  background: var(--background-color-disabled-text, var(--_background-color-disabled-text));
}
.action-button--type-text:active:not(.action-button--disabled), .action-button--type-text.action-button--active {
  background: var(--background-color-active-text, var(--_background-color-active-text));
}
.action-button--type-text:hover:not(.action-button--disabled) {
  border-top-color: var(--border-color-hover-text, var(--_border-color-hover-text));
  border-right-color: var(--border-color-hover-text, var(--_border-color-hover-text));
  border-bottom-color: var(--border-color-hover-text, var(--_border-color-hover-text));
  border-left-color: var(--border-color-hover-text, var(--_border-color-hover-text));
}
.action-button--type-text:focus:not(.action-button--disabled):not(.action-button--active)::before {
  content: "";
  filter: blur(2px);
  position: absolute;
  z-index: -1;
  border: var(--button-border-thickness) solid var(--border-color-focus-text, var(--_border-color-focus-text));
}
.action-button--type-text.action-button--disabled {
  border: var(--button-border-thickness) solid var(--border-color-disabled-text, var(--_border-color-disabled-text));
}
.action-button--type-text:active:not(.action-button--disabled), .action-button--type-text.action-button--active {
  border: var(--button-border-thickness) solid var(--border-color-active-text, var(--_border-color-active-text));
}
.action-button--type-text.action-button--size-small {
  height: var(--button-height-small);
  padding: var(--button-padding-y-small, 0) var(--button-padding-x-small);
}
.action-button--type-text.action-button--size-small ::slotted(kv-icon) {
  --icon-width: var(--button-icon-size-text-small);
  --icon-height: var(--button-icon-size-text-small);
}
.action-button--type-text.action-button--size-large {
  height: var(--button-height-large);
  padding: var(--button-padding-y-large, 0) var(--button-padding-x-large);
}
.action-button--type-text.action-button--size-large ::slotted(kv-icon) {
  --icon-width: var(--button-icon-size-text-large);
  --icon-height: var(--button-icon-size-text-large);
}
.action-button--type-danger {
  color: var(--text-color-default-danger, var(--_text-color-default-danger));
  background: linear-gradient(45deg, var(--background-color-hover-danger, var(--_background-color-hover-danger)) 50%, var(--background-color-default-danger, var(--_background-color-default-danger)) 50%);
  background-size: 350% 100%;
  background-repeat: no-repeat;
  background-color: var(--background-color-default-danger, 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: var(--button-border-thickness) solid var(--border-color-default-danger, var(--_border-color-default-danger));
}
.action-button--type-danger ::slotted(kv-icon) {
  --icon-color: var(--icon-color-default-danger, var(--_icon-color-default-danger));
}
.action-button--type-danger:hover:not(.action-button--disabled) {
  color: var(--text-color-hover-danger, var(--_text-color-hover-danger));
}
.action-button--type-danger:hover:not(.action-button--disabled) ::slotted(kv-icon) {
  --icon-color: var(--icon-color-hover-danger, var(--_icon-color-hover-danger));
}
.action-button--type-danger:focus:not(.action-button--disabled):not(.action-button--active) {
  color: var(--text-color-focus-danger, var(--_text-color-focus-danger));
}
.action-button--type-danger:focus:not(.action-button--disabled):not(.action-button--active) ::slotted(kv-icon) {
  --icon-color: var(--icon-color-focus-danger, var(--_icon-color-focus-danger));
}
.action-button--type-danger.action-button--disabled {
  color: var(--text-color-disabled-danger, var(--_text-color-disabled-danger));
}
.action-button--type-danger.action-button--disabled ::slotted(kv-icon) {
  --icon-color: var(--icon-color-disabled-danger, var(--_icon-color-disabled-danger));
}
.action-button--type-danger:active:not(.action-button--disabled), .action-button--type-danger.action-button--active {
  color: var(--text-color-active-danger, var(--_text-color-active-danger));
}
.action-button--type-danger:active:not(.action-button--disabled) ::slotted(kv-icon), .action-button--type-danger.action-button--active ::slotted(kv-icon) {
  --icon-color: var(--icon-color-active-danger, var(--_icon-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):not(.action-button--active) {
  background: var(--background-color-focus-danger, var(--_background-color-focus-danger));
}
.action-button--type-danger.action-button--disabled {
  background: var(--background-color-disabled-danger, var(--_background-color-disabled-danger));
}
.action-button--type-danger:active:not(.action-button--disabled), .action-button--type-danger.action-button--active {
  background: var(--background-color-active-danger, var(--_background-color-active-danger));
}
.action-button--type-danger:hover:not(.action-button--disabled) {
  border-top-color: var(--border-color-hover-danger, var(--_border-color-hover-danger));
  border-right-color: var(--border-color-hover-danger, var(--_border-color-hover-danger));
  border-bottom-color: var(--border-color-hover-danger, var(--_border-color-hover-danger));
  border-left-color: var(--border-color-hover-danger, var(--_border-color-hover-danger));
}
.action-button--type-danger:focus:not(.action-button--disabled):not(.action-button--active)::before {
  content: "";
  filter: blur(2px);
  position: absolute;
  z-index: -1;
  border: var(--button-border-thickness) solid var(--border-color-focus-danger, var(--_border-color-focus-danger));
}
.action-button--type-danger.action-button--disabled {
  border: var(--button-border-thickness) solid var(--border-color-disabled-danger, var(--_border-color-disabled-danger));
}
.action-button--type-danger:active:not(.action-button--disabled), .action-button--type-danger.action-button--active {
  border: var(--button-border-thickness) solid var(--border-color-active-danger, var(--_border-color-active-danger));
}
.action-button--type-danger.action-button--size-small {
  height: var(--button-height-small);
  padding: var(--button-padding-y-small, 0) var(--button-padding-x-small);
}
.action-button--type-danger.action-button--size-small ::slotted(kv-icon) {
  --icon-width: var(--button-icon-size-danger-small);
  --icon-height: var(--button-icon-size-danger-small);
}
.action-button--type-danger.action-button--size-large {
  height: var(--button-height-large);
  padding: var(--button-padding-y-large, 0) var(--button-padding-x-large);
}
.action-button--type-danger.action-button--size-large ::slotted(kv-icon) {
  --icon-width: var(--button-icon-size-danger-large);
  --icon-height: var(--button-icon-size-danger-large);
}
.action-button--disabled {
  cursor: not-allowed;
  user-select: none;
}

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