// State rules below only assign CSS custom properties; the actual
// declarations live on the flat .button class so twenty-front
// styled(LightIconButton) overrides keep beating them at (0,1,0) specificity,
// exactly like the legacy single Linaria class did.
// Cascade order replicates the legacy Linaria color switch precedence:
// (active || focus) > disabled > accent base — later rules win.

.button {
  align-items: center;
  background: transparent;
  border: var(--light-icon-button-border, none);
  border-radius: var(--t-border-radius-sm);
  box-shadow: var(--light-icon-button-box-shadow, none);
  color: var(--light-icon-button-color);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  font-family: var(--t-font-family);
  font-weight: var(--t-font-weight-regular);
  gap: var(--t-spacing-1);
  justify-content: center;
  padding: var(--t-spacing-1);
  transition: background 0.1s ease;
  white-space: nowrap;

  &:hover {
    background: var(
      --light-icon-button-hover-bg,
      var(--t-background-transparent-light)
    );
  }

  &:focus {
    outline: none;
  }

  @include focus-ring;

  &:active {
    background: var(
      --light-icon-button-active-bg,
      var(--t-background-transparent-medium)
    );
  }

  &[data-disabled] {
    cursor: not-allowed;
  }
}

.small {
  height: var(--t-spacing-6);
  min-width: var(--t-spacing-6);
  width: var(--t-spacing-6);
}

.medium {
  height: var(--t-spacing-8);
  min-width: var(--t-spacing-8);
  width: var(--t-spacing-8);
}

.button[data-accent='secondary'] {
  --light-icon-button-color: var(--t-font-color-secondary);
}

.button[data-accent='tertiary'] {
  --light-icon-button-color: var(--t-font-color-tertiary);
}

.button[data-disabled] {
  --light-icon-button-color: var(--t-font-color-extra-light);
  --light-icon-button-hover-bg: transparent;
  --light-icon-button-active-bg: transparent;
}

// active || focus turn the icon blue even when disabled, matching the legacy
// switch where the (active || focus) branch came first.
.button[data-active],
.button[data-focus] {
  --light-icon-button-color: var(--t-color-blue);
}

// focus is gated by !disabled in the component, like the legacy call-site.
.button[data-focus] {
  --light-icon-button-border: 1px solid var(--t-color-blue);
  --light-icon-button-box-shadow: 0 0 0 3px var(--t-color-blue3);
}