// State rules below only assign CSS custom properties; the actual
// declarations live on the flat .button class so twenty-front
// styled(FloatingButton) overrides keep beating them at (0,1,0) specificity,
// exactly like the legacy single Linaria class did.

.button {
  align-items: center;
  backdrop-filter: var(--floating-button-backdrop-filter, none);
  background: var(--t-background-primary);
  border: var(--floating-button-border, none);
  border-radius: var(--floating-button-radius, var(--t-border-radius-md));
  box-shadow: var(--floating-button-box-shadow, none);
  color: var(--floating-button-color, var(--t-font-color-secondary));
  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);
  padding: 0 var(--t-spacing-2);
  text-decoration: none;
  transition: background 0.1s ease;
  white-space: nowrap;

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

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

  &:focus {
    outline: none;
  }

  @include focus-ring;

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

.small {
  height: 24px;
}

.medium {
  height: 32px;
}

// position only reshapes the radius; standalone keeps the .button default.
.button[data-position='left'] {
  --floating-button-radius: var(--t-border-radius-md) 0px 0px
    var(--t-border-radius-md);
}

.button[data-position='middle'] {
  --floating-button-radius: 0px;
}

.button[data-position='right'] {
  --floating-button-radius: 0px var(--t-border-radius-md)
    var(--t-border-radius-md) 0px;
}

.button[data-apply-blur] {
  --floating-button-backdrop-filter: blur(20px);
}

// box-shadow matrix from the legacy nested ternary: shadow, focus, and
// shadow+focus — the combined rule comes last so it wins the cascade.
.button[data-apply-shadow] {
  --floating-button-box-shadow:
    0px 2px 4px 0px var(--t-background-transparent-light),
    0px 0px 4px 0px var(--t-background-transparent-medium);
}

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

.button[data-apply-shadow][data-focus] {
  --floating-button-box-shadow:
    0px 2px 4px 0px var(--t-background-transparent-light),
    0px 0px 4px 0px var(--t-background-transparent-medium),
    0 0 0 3px var(--t-color-blue3);
}

// disabled comes last: it beats focus in the legacy color ternary.
.button[data-disabled] {
  --floating-button-color: var(--t-font-color-extra-light);
  --floating-button-hover-bg: transparent;
  --floating-button-active-bg: transparent;
}