/* TC External Button — v1.4.2 (uses core Button colors; presets only guide gradient) */
.wp-block-button.tc-ext-btn .wp-block-button__link {
  border: 2px solid currentColor; /* base border follows core Button text color */
  color: inherit; /* base text follows core Button text color */
  border-radius: 999px;
  background: transparent; /* Outline default; Solid/Gradient override below */
  font-weight: 600;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* Corners */
.wp-block-button.tc-ext-btn.tc-square .wp-block-button__link { border-radius: 8px; }
.wp-block-button.tc-ext-btn.tc-rounded .wp-block-button__link { border-radius: 999px; }

/* Outline hover — base colors from core Button */
.wp-block-button.tc-ext-btn.tc-style-outline .wp-block-button__link:hover {
  background-color: currentColor; /* core text color */
  color: #ffffff !important;
  border-color: currentColor;
}

/* Solid — use core Button background color. Gutenberg sets inline style for background via block controls */
.wp-block-button.tc-ext-btn.tc-style-solid .wp-block-button__link {
  background-color: inherit; /* inherit core Button background if set; else transparent */
}

/* Gradient presets — apply gradient only when style is gradient; text stays white for contrast */
.wp-block-button.tc-ext-btn.tc-style-gradient .wp-block-button__link { color: #ffffff !important; border-color: transparent; }
.wp-block-button.tc-ext-btn.tc-style-gradient.tc-grad-green      .wp-block-button__link { background-image: linear-gradient(45deg, #15a34a, #22c55e); }
.wp-block-button.tc-ext-btn.tc-style-gradient.tc-grad-lightgreen .wp-block-button__link { background-image: linear-gradient(45deg, #22c55e, #86efac); }
.wp-block-button.tc-ext-btn.tc-style-gradient.tc-grad-orange     .wp-block-button__link { background-image: linear-gradient(45deg, #ff6d3d, #fd954e); }

/* Icon mask — size only; color follows currentColor (core text color). If you want fixed icon color, set via core text color */
.wp-block-button.tc-ext-btn .wp-block-button__link::after {
  content: '';
  display: inline-block;
  width: var(--tc-icon-size, 16px); height: var(--tc-icon-size, 16px);
  background-color: currentColor; /* icon follows text color from core Button */
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: var(--tc-icon-size, 16px) var(--tc-icon-size, 16px); mask-size: var(--tc-icon-size, 16px) var(--tc-icon-size, 16px);
  -webkit-mask-position: center; mask-position: center;
}

/* No icon */
.wp-block-button.tc-ext-btn.tc-icon-none .wp-block-button__link::after { content: none; }

/* Hide text */
.wp-block-button.tc-ext-btn.tc-hide-text .wp-block-button__link { font-size: 0; }
.wp-block-button.tc-ext-btn.tc-hide-text .wp-block-button__link::after { margin: 0; }

/* Icon masks */
.wp-block-button.tc-ext-btn.tc-icon-external .wp-block-button__link::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14 3h7v7h-2V6.41l-7.29 7.3-1.42-1.42L17.59 5H14V3zM19 13h2v7a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7v2H5v12h14v-4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14 3h7v7h-2V6.41l-7.29 7.3-1.42-1.42L17.59 5H14V3zM19 13h2v7a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7v2H5v12h14v-4z'/%3E%3C/svg%3E"); }
.wp-block-button.tc-ext-btn.tc-icon-arrow .wp-block-button__link::after   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 4l1.41 1.41L8.83 10H20v2H8.83l4.58 4.59L12 18l-8-8 8-6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 4l1.41 1.41L8.83 10H20v2H8.83l4.58 4.59L12 18l-8-8 8-6z'/%3E%3C/svg%3E"); }
.wp-block-button.tc-ext-btn.tc-icon-link .wp-block-button__link::after    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3.9 12a4.1 4.1 0 0 1 4.1-4.1h3v2h-3a2.1 2.1 0 0 0 0 4.2h3v2h-3A4.1 4.1 0 0 1 3.9 12zm12-4.1h-3v2h3a2.1 2.1 0 0 1 0 4.2h-3v2h3a4.1 4.1 0 1 0 0-8.2zM8 11h8v2H8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3.9 12a4.1 4.1 0 0 1 4.1-4.1h3v2h-3a2.1 2.1 0 0 0 0 4.2h3v2h-3A4.1 4.1 0 0 1 3.9 12zm12-4.1h-3v2h3a2.1 2.1 0 0 1 0 4.2h-3v2h3a4.1 4.1 0 1 0 0-8.2zM8 11h8v2H8z'/%3E%3C/svg%3E"); }
.wp-block-button.tc-ext-btn.tc-icon-download .wp-block-button__link::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 20h14v-2H5v2zm7-18h-2v8H6l6 6 6-6h-4V2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 20h14v-2H5v2zm7-18h-2v8H6l6 6 6-6h-4V2z'/%3E%3C/svg%3E"); }