/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** CODE/CONSOLE **/
@property --rotation {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate-border {
  to {
    --rotation: 360deg;
  }
}
:host {
  /**
   * @prop --button-icon-large-width: Button's icon large width.
   * @prop --button-icon-small-width: Button's icon small width.
   * @prop --button-icon-large-height: Button's icon large height.
   * @prop --button-icon-small-height: Button's icon small height.
   * @prop --button-size-large: Button's height and width size when size is large.
   * @prop --button-size-small: Button's height and width size when size is small.
   */
  --button-size-large: 36px;
  --button-size-small: 28px;
  --button-icon-large-width: 24px;
  --button-icon-large-height: 24px;
  --button-icon-small-height: 20px;
  --button-icon-small-width: 20px;
  position: relative;
}

.action-button-icon--size-large kv-action-button::part(button) {
  width: var(--button-size-large);
}
.action-button-icon--size-large kv-icon {
  --icon-width: var(--button-icon-large-width);
  --icon-height: var(--button-icon-large-height);
}

.action-button-icon--size-small kv-action-button::part(button) {
  width: var(--button-size-small);
}
.action-button-icon--size-small kv-icon {
  --icon-width: var(--button-icon-small-width);
  --icon-height: var(--button-icon-small-height);
}

kv-action-button {
  --background-color-active-tertiary: var(--kv-neutral-5, #707070);
  --border-color-active-tertiary: var(--kv-neutral-4, #bebebe);
  --text-color-active-tertiary: var(--kv-neutral-4, #bebebe);
  --button-padding-x-small: 0;
  --button-height-large: var(--button-size-large);
  --button-height-small: var(--button-size-small);
  display: flex;
}
kv-action-button::part(button) {
  justify-content: center;
}

.button-badge {
  position: absolute;
  z-index: 1;
  top: -5px;
  right: -5px;
}