/*
==========================================
Shared Selectors
==========================================
*/
/*
==========================================
Icon Base
==========================================
*/
iconify-icon[data-intro-block-icon="1"] {
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  vertical-align: middle;
  flex: 0 0 auto;
  pointer-events: none;
  user-select: none;
  /* Icon is always first in DOM, use CSS order for visual positioning */
  order: -1; /* Default LEFT position */
}

/*
==========================================
Base Layout (Heading + Button)
==========================================
*/
/* Button container */
:where(.editor-styles-wrapper) .wp-block-buttons > .wp-block-button[class*=has-icon-] .wp-block-button__link, .wp-block-buttons > .wp-block-button[class*=has-icon-] .wp-block-button__link {
  display: flex;
  gap: var(--wp--preset--spacing--20);
  flex-flow: row;
}

/*
==========================================
Core Width Compatibility
==========================================
*/
/* Heading container */
:where(.editor-styles-wrapper) .wp-block-heading[class*=has-icon-], .wp-block-heading[class*=has-icon-] {
  display: flex;
  gap: var(--wp--preset--spacing--20);
  flex-flow: row;
}

/*
==========================================
LEFT POSITION (default, icon already first)
==========================================
*/
:where(.editor-styles-wrapper) .wp-block-button[class*=has-icon-left] .wp-block-button__link:not([class*=has-text-align-]), .wp-block-button[class*=has-icon-left] .wp-block-button__link:not([class*=has-text-align-]) {
  align-items: center;
}
:where(.editor-styles-wrapper) .wp-block-button[class*=has-icon-left] .wp-block-button__link iconify-icon[data-intro-block-icon="1"], .wp-block-button[class*=has-icon-left] .wp-block-button__link iconify-icon[data-intro-block-icon="1"] {
  order: -1; /* Keep icon first */
}

:where(.editor-styles-wrapper) .wp-block-heading[class*=has-icon-left], .wp-block-heading[class*=has-icon-left] {
  align-items: center;
  flex-flow: row;
}
:where(.editor-styles-wrapper) .wp-block-heading[class*=has-icon-left] iconify-icon[data-intro-block-icon="1"], .wp-block-heading[class*=has-icon-left] iconify-icon[data-intro-block-icon="1"] {
  order: -1; /* Keep icon first */
}

/*
==========================================
RIGHT POSITION (move icon to end)
==========================================
*/
:where(.editor-styles-wrapper) .wp-block-button[class*=has-icon-right] .wp-block-button__link:not([class*=has-text-align-]), .wp-block-button[class*=has-icon-right] .wp-block-button__link:not([class*=has-text-align-]) {
  align-items: center;
}
:where(.editor-styles-wrapper) .wp-block-button[class*=has-icon-right] .wp-block-button__link iconify-icon[data-intro-block-icon="1"], .wp-block-button[class*=has-icon-right] .wp-block-button__link iconify-icon[data-intro-block-icon="1"] {
  order: 999; /* Move icon to end */
}

:where(.editor-styles-wrapper) .wp-block-heading[class*=has-icon-right], .wp-block-heading[class*=has-icon-right] {
  align-items: center;
}
:where(.editor-styles-wrapper) .wp-block-heading[class*=has-icon-right] iconify-icon[data-intro-block-icon="1"], .wp-block-heading[class*=has-icon-right] iconify-icon[data-intro-block-icon="1"] {
  order: 999; /* Move icon to end */
}

/*
==========================================
VERTICAL POSITIONS (Top / Bottom)
==========================================
*/
/* TOP (icon already first, just change flex direction) */
:where(.editor-styles-wrapper) .wp-block-button[class*=has-icon-top] .wp-block-button__link, .wp-block-button[class*=has-icon-top] .wp-block-button__link {
  flex-flow: column;
}
:where(.editor-styles-wrapper) .wp-block-button[class*=has-icon-top] .wp-block-button__link iconify-icon[data-intro-block-icon="1"], .wp-block-button[class*=has-icon-top] .wp-block-button__link iconify-icon[data-intro-block-icon="1"] {
  order: -1; /* Keep icon first (top) */
}

:where(.editor-styles-wrapper) .wp-block-heading[class*=has-icon-top], .wp-block-heading[class*=has-icon-top] {
  flex-flow: column;
}
:where(.editor-styles-wrapper) .wp-block-heading[class*=has-icon-top] iconify-icon[data-intro-block-icon="1"], .wp-block-heading[class*=has-icon-top] iconify-icon[data-intro-block-icon="1"] {
  order: -1; /* Keep icon first (top) */
}
:where(.editor-styles-wrapper) .wp-block-heading[class*=has-icon-top] iconify-icon[data-intro-block-icon="1"], .wp-block-heading[class*=has-icon-top] iconify-icon[data-intro-block-icon="1"] {
  align-self: flex-start;
}
:where(.editor-styles-wrapper) .wp-block-heading[class*=has-icon-top].has-text-align-center iconify-icon[data-intro-block-icon="1"], .wp-block-heading[class*=has-icon-top].has-text-align-center iconify-icon[data-intro-block-icon="1"] {
  align-self: center;
}
:where(.editor-styles-wrapper) .wp-block-heading[class*=has-icon-top].has-text-align-right iconify-icon[data-intro-block-icon="1"], .wp-block-heading[class*=has-icon-top].has-text-align-right iconify-icon[data-intro-block-icon="1"] {
  align-self: flex-end;
}

/* BOTTOM (move icon to end) */
:where(.editor-styles-wrapper) .wp-block-button[class*=has-icon-bottom] .wp-block-button__link, .wp-block-button[class*=has-icon-bottom] .wp-block-button__link {
  flex-flow: column;
}
:where(.editor-styles-wrapper) .wp-block-button[class*=has-icon-bottom] .wp-block-button__link iconify-icon[data-intro-block-icon="1"], .wp-block-button[class*=has-icon-bottom] .wp-block-button__link iconify-icon[data-intro-block-icon="1"] {
  order: 999; /* Move icon to end (bottom) */
}

:where(.editor-styles-wrapper) .wp-block-heading[class*=has-icon-bottom], .wp-block-heading[class*=has-icon-bottom] {
  flex-flow: column;
}
:where(.editor-styles-wrapper) .wp-block-heading[class*=has-icon-bottom] iconify-icon[data-intro-block-icon="1"], .wp-block-heading[class*=has-icon-bottom] iconify-icon[data-intro-block-icon="1"] {
  order: 999; /* Move icon to end (bottom) */
}
:where(.editor-styles-wrapper) .wp-block-heading[class*=has-icon-bottom] iconify-icon[data-intro-block-icon="1"], .wp-block-heading[class*=has-icon-bottom] iconify-icon[data-intro-block-icon="1"] {
  align-self: flex-start;
}
:where(.editor-styles-wrapper) .wp-block-heading[class*=has-icon-bottom].has-text-align-center iconify-icon[data-intro-block-icon="1"], .wp-block-heading[class*=has-icon-bottom].has-text-align-center iconify-icon[data-intro-block-icon="1"] {
  align-self: center;
}
:where(.editor-styles-wrapper) .wp-block-heading[class*=has-icon-bottom].has-text-align-right iconify-icon[data-intro-block-icon="1"], .wp-block-heading[class*=has-icon-bottom].has-text-align-right iconify-icon[data-intro-block-icon="1"] {
  align-self: flex-end;
}

/*
==========================================
Button Text Alignment Preservation
==========================================
*/
:where(.editor-styles-wrapper) .wp-block-button[class*=has-icon-] .wp-block-button__link.has-text-align-left, .wp-block-button[class*=has-icon-] .wp-block-button__link.has-text-align-left {
  justify-content: flex-start;
}

:where(.editor-styles-wrapper) .wp-block-button[class*=has-icon-] .wp-block-button__link.has-text-align-center, .wp-block-button[class*=has-icon-] .wp-block-button__link.has-text-align-center {
  justify-content: center;
}

:where(.editor-styles-wrapper) .wp-block-button[class*=has-icon-] .wp-block-button__link.has-text-align-right, .wp-block-button[class*=has-icon-] .wp-block-button__link.has-text-align-right {
  justify-content: flex-end;
}

/*
==========================================
Heading Text Alignment Preservation
==========================================
*/
:where(.editor-styles-wrapper) .wp-block-heading[class*=has-icon-], .wp-block-heading[class*=has-icon-] {
  justify-content: flex-start;
}

:where(.editor-styles-wrapper) .wp-block-heading.has-text-align-center[class*=has-icon-], .wp-block-heading.has-text-align-center[class*=has-icon-] {
  justify-content: center;
}

:where(.editor-styles-wrapper) .wp-block-heading.has-text-align-right[class*=has-icon-], .wp-block-heading.has-text-align-right[class*=has-icon-] {
  justify-content: flex-end;
}

/*
==========================================
Justify Wide (Left/Right Only)
==========================================
*/
:where(.editor-styles-wrapper) .wp-block-button.has-justify-space-between[class*=has-icon-left] .wp-block-button__link, .wp-block-button.has-justify-space-between[class*=has-icon-left] .wp-block-button__link,
:where(.editor-styles-wrapper) .wp-block-button.has-justify-space-between[class*=has-icon-right] .wp-block-button__link,
.wp-block-button.has-justify-space-between[class*=has-icon-right] .wp-block-button__link {
  justify-content: space-between;
  width: 100%;
}

:where(.editor-styles-wrapper) .wp-block-heading.has-justify-space-between[class*=has-icon-left], .wp-block-heading.has-justify-space-between[class*=has-icon-left],
:where(.editor-styles-wrapper) .wp-block-heading.has-justify-space-between[class*=has-icon-right],
.wp-block-heading.has-justify-space-between[class*=has-icon-right] {
  justify-content: space-between;
  width: 100%;
}

/*
==========================================
Icon Sizing
==========================================
*/
.intro-block-icon {
  display: contents;
}
.intro-block-icon iconify-icon[data-intro-block-icon="1"] {
  font-size: 1em;
}
.intro-block-icon--small {
  font-size: clamp(0.9em, 0.9em + (1vw - 0.45rem) * 0.133, 1em);
}
.intro-block-icon--medium {
  font-size: clamp(1.2em, 1.2em + (1vw - 0.45rem) * 0.475, 1.555556em);
}
.intro-block-icon--large {
  font-size: clamp(1.44em, 1.44em + (1vw - 0.45rem) * 0.845, 2.074074em);
}