.icon-button {
  --icon-button-background: transparent;
  --icon-button-background-hover: transparent;
  --icon-button-background-active: transparent;
  --icon-button-foreground: var(--color-text-primary);
  --icon-button-hit-size: var(--touch-target-size);
  --icon-button-icon-size: var(--icon-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-button-hit-size);
  height: var(--icon-button-hit-size);
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--icon-button-background);
  color: var(--icon-button-foreground);
  font-weight: var(--font-weight-control);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--duration-standard), border-color var(--duration-standard), color var(--duration-standard), transform var(--duration-standard);
}

.icon-button:hover:not(:disabled) {
  background: var(--icon-button-background-hover);
}

.icon-button:active:not(:disabled) {
  background: var(--icon-button-background-active);
  transform: scale(var(--control-active-scale));
}

.icon-button:focus-visible {
  outline: var(--control-focus-width) solid var(--color-control-focus);
  outline-offset: var(--control-focus-offset);
}

.icon-button:disabled {
  opacity: var(--control-disabled-opacity);
  cursor: default;
}

.icon-button--plain {
  --icon-button-background-hover: var(--color-control-secondary);
  --icon-button-background-active: var(--color-control-secondary-active);
}

.icon-button--subtle {
  --icon-button-background: var(--color-control-secondary);
  --icon-button-background-hover: var(--color-control-secondary-hover);
  --icon-button-background-active: var(--color-control-secondary-active);
}

.icon-button--filled {
  --icon-button-background: var(--color-control-primary);
  --icon-button-background-hover: var(--color-control-primary-hover);
  --icon-button-background-active: var(--color-control-primary-active);
  --icon-button-foreground: var(--color-control-on-primary);
}

.icon-button--danger {
  --icon-button-background-hover: var(--color-control-danger-subtle-hover);
  --icon-button-background-active: var(--color-control-danger-subtle-active);
  --icon-button-foreground: var(--color-control-danger);
}

.icon-button[data-selected='true'] {
  --icon-button-background: var(--color-control-selected);
  --icon-button-foreground: var(--color-control-primary);
}

.icon-button--with-text {
  width: auto;
  min-width: var(--touch-target-size);
  padding-inline: var(--control-padding-sm);
}

.icon-button__content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--control-gap);
}

.icon-button__icon {
  flex: 0 0 auto;
  width: var(--icon-button-icon-size);
  height: var(--icon-button-icon-size);
}

.icon-button__text {
  font-size: var(--font-size-control-sm);
}

.icon-button__spinner {
  position: absolute;
  display: none;
  width: var(--loading-indicator-size);
  height: var(--loading-indicator-size);
  border: var(--loading-indicator-width) solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: icon-button-loading var(--duration-loading) linear infinite;
}

.icon-button[data-loading='true'] .icon-button__content {
  visibility: hidden;
}

.icon-button[data-loading='true'] .icon-button__spinner {
  display: block;
}

@keyframes icon-button-loading {
  to {
    transform: rotate(1turn);
  }
}