/* ================================================
   BUTTONS
   Warianty: filled / outline
   Każdy wariant ustawia tylko zmienne:
   --ttc-btn-color  kolor tła (filled) lub obrysu i tekstu (outline)
   --ttc-btn-txt    kolor tekstu (tylko filled)
   ================================================ */

/* --- płynne przejście na hover (wszystkie buttony) --- */

:where(.wp-element-button, .wp-block-button__link) {
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    filter 0.2s ease;
}

/* --- kolory wariantów --- */

.is-style-filled-accent1 {
  --ttc-btn-color: var(--wp--preset--color--accent-1-dark);
  --ttc-btn-txt: var(--wp--preset--color--white);
}
.is-style-filled-accent2 {
  --ttc-btn-color: var(--wp--preset--color--accent-2-root);
  --ttc-btn-txt: var(--wp--preset--color--surface-invert);
}
.is-style-filled-base-txt {
  --ttc-btn-color: var(--wp--preset--color--base-txt);
  --ttc-btn-txt: var(--wp--preset--color--white);
}
.is-style-filled-white {
  --ttc-btn-color: var(--wp--preset--color--white);
  --ttc-btn-txt: var(--wp--preset--color--base-txt);
}

.is-style-outline-accent1 {
  --ttc-btn-color: var(--wp--preset--color--accent-1-dark);
}
.is-style-outline-accent2 {
  --ttc-btn-color: var(--wp--preset--color--accent-2-root);
}
.is-style-outline-base-txt {
  --ttc-btn-color: var(--wp--preset--color--base-txt);
}
.is-style-outline-white {
  --ttc-btn-color: var(--wp--preset--color--white);
}

/* --- filled --- */

.wp-block-button[class*="is-style-filled-"] .wp-block-button__link {
  background-color: var(--ttc-btn-color);
  color: var(--ttc-btn-txt);
  border: 2px solid var(--ttc-btn-color);
}

.wp-block-button[class*="is-style-filled-"] .wp-block-button__link:hover {
  filter: brightness(0.85);
}

/* --- outline ---
   :not() wyklucza wbudowany styl WP "is-style-outline--N" */

.wp-block-button[class*="is-style-outline-"]:not([class*="is-style-outline--"])
  .wp-block-button__link {
  background-color: transparent;
  color: var(--ttc-btn-color);
  border: 2px solid var(--ttc-btn-color);
}

.wp-block-button[class*="is-style-outline-"]:not([class*="is-style-outline--"])
  .wp-block-button__link:hover {
  background-color: color-mix(in srgb, var(--ttc-btn-color) 15%, transparent);
}

/* --- chevron po tekście przycisku ---
   Pojawia się na hover i focus z klawiatury.
   Kolor bierze z tekstu przycisku (currentColor), więc działa w każdym wariancie. */

:root {
  --ttc-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}

.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wp-element-button::after {
  content: "";
  flex: none;
  width: 0;
  height: 0.9em;
  margin-left: 0;
  background-color: currentColor;
  -webkit-mask: var(--ttc-chevron) center / contain no-repeat;
  mask: var(--ttc-chevron) center / contain no-repeat;
  opacity: 0;
  transform: translateX(-0.4em);
  transition:
    width 0.25s ease,
    margin-left 0.25s ease,
    opacity 0.25s ease,
    transform 0.25s ease;
}

.wp-element-button:is(:hover, :focus-visible)::after {
  width: 0.9em;
  margin-left: 0.5em;
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .wp-element-button::after {
    transition: none;
  }
}