@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. iconButton) */

.iconbutton__G-cEu {
  padding: var(--click-button-iconButton-default-space-y)
    var(--click-button-iconButton-default-space-x);
  border: var(--click-button-stroke) solid;
  border-radius: var(--click-button-iconButton-radii-all);
  cursor: pointer;
}

.iconbutton__G-cEu:focus-visible {
  outline: 2px solid var(--click-global-color-outline-default);
  outline-offset: 2px;
}

.iconbutton_size_sm__tT3BV {
  padding: var(--click-button-iconButton-sm-space-y)
    var(--click-button-iconButton-sm-space-x);
}

.iconbutton_size_xs__CxWtP {
  padding: var(--click-button-iconButton-xs-space-y)
    var(--click-button-iconButton-xs-space-x);
}

.iconbutton_type_primary__QEfNk {
  border-color: var(--click-button-iconButton-color-primary-stroke-default);
  background-color: var(--click-button-iconButton-color-primary-background-default);
  color: var(--click-button-iconButton-color-primary-text-default);
}

.iconbutton_type_primary__QEfNk:visited {
  background-color: var(--click-button-iconButton-color-primary-background-default);
}

.iconbutton_type_primary__QEfNk:not([disabled]):hover {
  border-color: var(--click-button-iconButton-color-primary-stroke-hover);
  background-color: var(--click-button-iconButton-color-primary-background-hover);
  color: var(--click-button-iconButton-color-primary-text-hover);
}

.iconbutton_type_primary__QEfNk:not([disabled]):focus,
.iconbutton_type_primary__QEfNk:not([disabled]):active,
.iconbutton_type_primary__QEfNk:not([disabled]):focus-within {
  border-color: var(--click-button-iconButton-color-primary-stroke-active);
  background-color: var(--click-button-iconButton-color-primary-background-active);
  color: var(--click-button-iconButton-color-primary-text-active);
}

.iconbutton_type_secondary__qeL8h {
  border-color: var(--click-button-iconButton-color-secondary-stroke-default);
  background-color: var(--click-button-iconButton-color-secondary-background-default);
  color: var(--click-button-iconButton-color-secondary-text-default);
}

.iconbutton_type_secondary__qeL8h:visited {
  background-color: var(--click-button-iconButton-color-secondary-background-default);
}

.iconbutton_type_secondary__qeL8h:not([disabled]):hover {
  border-color: var(--click-button-iconButton-color-secondary-stroke-hover);
  background-color: var(--click-button-iconButton-color-secondary-background-hover);
  color: var(--click-button-iconButton-color-secondary-text-hover);
}

.iconbutton_type_secondary__qeL8h:not([disabled]):focus,
.iconbutton_type_secondary__qeL8h:not([disabled]):active,
.iconbutton_type_secondary__qeL8h:not([disabled]):focus-within {
  border-color: var(--click-button-iconButton-color-secondary-stroke-active);
  background-color: var(--click-button-iconButton-color-secondary-background-active);
  color: var(--click-button-iconButton-color-secondary-text-active);
}

.iconbutton_type_ghost__nLh8i {
  border-color: var(--click-button-iconButton-color-ghost-stroke-default);
  background-color: var(--click-button-iconButton-color-ghost-background-default);
  color: var(--click-button-iconButton-color-ghost-text-default);
}

.iconbutton_type_ghost__nLh8i:visited {
  background-color: var(--click-button-iconButton-color-ghost-background-default);
}

.iconbutton_type_ghost__nLh8i:not([disabled]):hover {
  border-color: var(--click-button-iconButton-color-ghost-stroke-hover);
  background-color: var(--click-button-iconButton-color-ghost-background-hover);
  color: var(--click-button-iconButton-color-ghost-text-hover);
}

.iconbutton_type_ghost__nLh8i:not([disabled]):focus,
.iconbutton_type_ghost__nLh8i:not([disabled]):active,
.iconbutton_type_ghost__nLh8i:not([disabled]):focus-within {
  border-color: var(--click-button-iconButton-color-ghost-stroke-active);
  background-color: var(--click-button-iconButton-color-ghost-background-active);
  color: var(--click-button-iconButton-color-ghost-text-active);
}

.iconbutton_type_danger__CjQg- {
  border-color: var(--click-button-iconButton-color-danger-stroke-default);
  background-color: var(--click-button-iconButton-color-danger-background-default);
  color: var(--click-button-iconButton-color-danger-text-default);
}

.iconbutton_type_danger__CjQg-:visited {
  background-color: var(--click-button-iconButton-color-danger-background-default);
}

.iconbutton_type_danger__CjQg-:not([disabled]):hover {
  border-color: var(--click-button-iconButton-color-danger-stroke-hover);
  background-color: var(--click-button-iconButton-color-danger-background-hover);
  color: var(--click-button-iconButton-color-danger-text-hover);
}

.iconbutton_type_danger__CjQg-:not([disabled]):focus,
.iconbutton_type_danger__CjQg-:not([disabled]):active,
.iconbutton_type_danger__CjQg-:not([disabled]):focus-within {
  border-color: var(--click-button-iconButton-color-danger-stroke-active);
  background-color: var(--click-button-iconButton-color-danger-background-active);
  color: var(--click-button-iconButton-color-danger-text-active);
}

.iconbutton_type_info__Ue7wb {
  border-color: var(--click-button-iconButton-color-info-stroke-default);
  background-color: var(--click-button-iconButton-color-info-background-default);
  color: var(--click-button-iconButton-color-info-text-default);
}

.iconbutton_type_info__Ue7wb:visited {
  background-color: var(--click-button-iconButton-color-info-background-default);
}

.iconbutton_type_info__Ue7wb:not([disabled]):hover {
  border-color: var(--click-button-iconButton-color-info-stroke-hover);
  background-color: var(--click-button-iconButton-color-info-background-hover);
  color: var(--click-button-iconButton-color-info-text-hover);
}

.iconbutton_type_info__Ue7wb:not([disabled]):focus,
.iconbutton_type_info__Ue7wb:not([disabled]):active,
.iconbutton_type_info__Ue7wb:not([disabled]):focus-within {
  border-color: var(--click-button-iconButton-color-info-stroke-active);
  background-color: var(--click-button-iconButton-color-info-background-active);
  color: var(--click-button-iconButton-color-info-text-active);
}

.iconbutton__G-cEu[disabled] {
  background-color: var(--click-button-iconButton-color-disabled-background-default);
  color: var(--click-button-iconButton-color-disabled-text-default);
  cursor: not-allowed;
}
}