// Breakpoint at which the label becomes visible (mobile-first).
// Override this variable in your own SCSS before importing to customise.
// NOTE: CSS custom properties cannot be used in @media conditions — this must be a SCSS variable.
$icon-label-bp: 48rem !default; // 768px

// Global theming tokens for icon buttons.
// Override in your theme stylesheet: :root { --icon-btn-size: 2.5rem; }
// Minimum tap target recommended: 2.75rem (44px, WCAG 2.5.5).
:root {
  --icon-btn-size: 3rem;
  --icon-btn-gap: 0.375rem;
  --icon-btn-padding-inline: 0.75rem;
}

// Label is visually hidden by default (screen-reader accessible at all sizes).
// Revealed at tablet+ via min-width media query below.
[data-icon-btn] [data-icon-label],
[data-icon-btn] .icon-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0); // fallback for older browsers
  clip-path: inset(50%); // modern replacement (97%+ support)
  white-space: nowrap;
  border: 0;
}

// Color reset for all IconButton instances.
// background stays transparent (set by button[data-style~="icon"]);
// color defaults to currentColor so the icon inherits from context.
// Override via styles={{ "--btn-color": "..." }} when a specific color is needed.
button[data-icon-btn],
button.icon-btn,
[data-icon-btn],
.icon-btn {
  --btn-color: currentColor;

  padding: 0;
  width: var(--icon-btn-size);
  height: var(--icon-btn-size);
  display: inline-grid;
  place-items: center;

  // Layout when a visible label is present alongside the icon.
  // Higher specificity than button[data-style~="icon"] (which uses padding: unset)
  // so padding is restored without needing a consumer override.
  &[data-icon-btn~="has-label"] {
    width: max-content;
    min-width: var(--icon-btn-size);
    gap: var(--icon-btn-gap);
    padding-inline: var(--icon-btn-padding-inline);
    grid-auto-flow: column; // keep icon + label side-by-side

    [data-icon-label],
    .icon-label {
      font-size: var(--btn-fs, 0.875rem);
      line-height: 1;
      white-space: nowrap;
    }
  }
}

// Reveal label text at tablet+ — icon + label visible together.
// Uses min-width (mobile-first): hidden by default, shown at 48rem+.
// BREAKING CHANGE: Previously max-width (desktop-first).
@media (min-width: #{$icon-label-bp}) {
  [data-icon-btn] [data-icon-label],
  [data-icon-btn] .icon-label {
    position: static;
    width: auto;
    height: auto;
    padding: unset;
    margin: unset;
    overflow: visible;
    clip: unset;
    clip-path: unset;
    white-space: nowrap;
    border: unset;
  }
}