/* ===========================================
   GSAPPER BUTTONS
   All button components for Bricks Builder.
   Icons via CSS mask-image — no markup needed.

   Prefix: sa- (System A)

   Bricks structure for all buttons:
     a.sa-btn-[name]
       ├─ span           (text label)
       └─ div.sa-btn-icon (empty — arrows via ::before / ::after)

   Global design tokens (set via admin or :root override):
     --sa-btn-radius       default 20px
     --sa-btn-padding-top  default 14px
     --sa-btn-padding-right default 20px
     --sa-btn-padding-bottom default 14px
     --sa-btn-padding-left  default 20px
     --sa-btn-font-size    default inherit
     --sa-btn-icon-size    default 16px (primary/outline), 20px (slide), 1.5rem (stream)
   =========================================== */


/* ===========================================
   BRICKS EDITOR FIX
   Bricks adds min-width/min-height to all empty divs in the
   builder canvas (body.bricks-is-frontend). Override for our
   structural icon elements so they display at the correct size.
   =========================================== */

.sa-btn-icon.brx-draggable,
.sa-btn-icon.bricks-draggable-item,
.sa-btn-icon-bg.brx-draggable,
.sa-btn-icon-bg.bricks-draggable-item,
.sa-btn-icon-clip.brx-draggable,
.sa-btn-icon-clip.bricks-draggable-item,
.sa-btn-icon-list.brx-draggable,
.sa-btn-icon-list.bricks-draggable-item,
.sa-btn-icon-arrow.brx-draggable,
.sa-btn-icon-arrow.bricks-draggable-item {
  min-width: 0 !important;
  min-height: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}


/* ===========================================
   SHARED: ICON SETUP (primary + outline)
   Both arrows share these base styles.
   =========================================== */

.sa-btn-primary .sa-btn-icon,
.sa-btn-outline .sa-btn-icon {
  position: relative;
  width: var(--sa-btn-icon-size, 16px);
  height: var(--sa-btn-icon-size, 16px);
  flex-shrink: 0;
  overflow: hidden;
}

.sa-btn-primary .sa-btn-icon::before,
.sa-btn-primary .sa-btn-icon::after,
.sa-btn-outline .sa-btn-icon::before,
.sa-btn-outline .sa-btn-icon::after {
  content: '';
  position: absolute;
  width: var(--sa-btn-icon-size, 16px);
  height: var(--sa-btn-icon-size, 16px);
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M13.5 2.5L2.5 13.5M5 2.5h8.5v8.5' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  transition: top 0.3s ease, left 0.3s ease;
}

/* Arrow 1 — starts visible */
.sa-btn-primary .sa-btn-icon::before,
.sa-btn-outline .sa-btn-icon::before {
  top: 0;
  left: 0;
}

/* Arrow 2 — starts hidden (bottom-left, outside clip box) */
.sa-btn-primary .sa-btn-icon::after,
.sa-btn-outline .sa-btn-icon::after {
  top: var(--sa-btn-icon-size, 16px);
  left: calc(-1 * var(--sa-btn-icon-size, 16px));
}

/* On hover: arrow 1 exits top-right, arrow 2 enters from bottom-left */
.sa-btn-primary:hover .sa-btn-icon::before,
.sa-btn-outline:hover .sa-btn-icon::before {
  top: calc(-1 * var(--sa-btn-icon-size, 16px));
  left: var(--sa-btn-icon-size, 16px);
}

.sa-btn-primary:hover .sa-btn-icon::after,
.sa-btn-outline:hover .sa-btn-icon::after {
  top: 0;
  left: 0;
}


/* ===========================================
   SA-BTN-PRIMARY
   Filled dark background, light text.
   =========================================== */

.sa-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--sa-btn-padding-top, 14px) var(--sa-btn-padding-right, 20px) var(--sa-btn-padding-bottom, 14px) var(--sa-btn-padding-left, 20px);
  background-color: var(--sa-btn-color, var(--primary, #111111));
  color: var(--sa-btn-text, #ffffff);
  font-size: var(--sa-btn-font-size, inherit);
  border-radius: var(--sa-btn-radius, 20px);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.sa-btn-primary:hover {
  background-color: var(--sa-btn-hover-bg);
  color: var(--sa-btn-hover-text);
}


/* ===========================================
   SA-BTN-OUTLINE
   Border only, transparent background.
   Padding is 1px less top/bottom to compensate for the border.
   =========================================== */

.sa-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: calc(var(--sa-btn-padding-top, 14px) - 1px) var(--sa-btn-padding-right, 20px) calc(var(--sa-btn-padding-bottom, 14px) - 1px) var(--sa-btn-padding-left, 20px);
  background-color: transparent;
  color: var(--sa-btn-color, var(--primary, #111111));
  font-size: var(--sa-btn-font-size, inherit);
  border: 1px solid var(--sa-btn-color, var(--primary, #111111));
  border-radius: var(--sa-btn-radius, 20px);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.sa-btn-outline:hover {
  background-color: var(--sa-btn-hover-bg);
  color: var(--sa-btn-hover-text);
  border-color: var(--sa-btn-hover-bg);
}


/* ===========================================
   SA-BTN-SLIDE
   Filled pill. On hover: gap expands (icon slides right)
   and colors invert. Right-arrow icon.
   Source reference: jacques-cie.com
   =========================================== */

.sa-btn-slide {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--sa-btn-padding-top, 14px) var(--sa-btn-padding-right, 20px) var(--sa-btn-padding-bottom, 14px) var(--sa-btn-padding-left, 20px);
  background-color: var(--sa-btn-color, var(--primary, #111111));
  color: var(--sa-btn-text, #ffffff);
  font-size: var(--sa-btn-font-size, inherit);
  border-radius: var(--sa-btn-radius, 20px);
  text-decoration: none;
  cursor: pointer;
  transition: gap 0.3s cubic-bezier(0.66, 0, 0.34, 1),
              padding 0.3s cubic-bezier(0.66, 0, 0.34, 1),
              background-color 0.3s cubic-bezier(0.66, 0, 0.34, 1),
              color 0.3s cubic-bezier(0.66, 0, 0.34, 1);
}

/* On hover: gap expands +12px, x-padding shrinks 6px each side to keep total width constant */
.sa-btn-slide:hover {
  gap: 20px;
  padding-top: var(--sa-btn-padding-top, 14px);
  padding-right: calc(var(--sa-btn-padding-right, 20px) - 6px);
  padding-bottom: var(--sa-btn-padding-bottom, 14px);
  padding-left: calc(var(--sa-btn-padding-left, 20px) - 6px);
  background-color: var(--sa-btn-hover-bg);
  color: var(--sa-btn-hover-text);
}

.sa-btn-slide .sa-btn-icon {
  width: var(--sa-btn-icon-size, 20px);
  height: var(--sa-btn-icon-size, 20px);
  flex-shrink: 0;
}

.sa-btn-slide .sa-btn-icon::before {
  content: '';
  display: block;
  width: var(--sa-btn-icon-size, 20px);
  height: var(--sa-btn-icon-size, 20px);
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m11.3 4.5-.8.8 4.1 4.1H3.1v1.2h11.5l-4.1 4.1.8.8 5.6-5.5z'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}


/* ===========================================
   SA-BTN-STREAM
   Filled button. Right-arrow streams through
   a square icon that morphs to a circle on hover.
   Reference: moment.com
   =========================================== */

.sa-btn-stream {
  --sa-stream-icon: var(--sa-btn-icon-size, 1.5rem);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: var(--sa-btn-padding-top, 14px) var(--sa-btn-padding-right, 20px) var(--sa-btn-padding-bottom, 14px) var(--sa-btn-padding-left, 20px);
  background-color: var(--sa-btn-color, var(--primary, #111111));
  color: var(--sa-btn-text, #ffffff);
  font-size: var(--sa-btn-font-size, inherit);
  border-radius: var(--sa-btn-radius, 20px);
  text-decoration: none;
  cursor: pointer;
}

/* Icon container — sets size, parent for bg + clip */
.sa-btn-stream .sa-btn-icon {
  position: relative;
  width: var(--sa-stream-icon);
  height: var(--sa-stream-icon);
  flex-shrink: 0;
}

/* Square bg that morphs to circle on hover.
   Color is auto-derived: +0.2 lightness from button bg via oklch,
   keeping the same hue/chroma for a tonal relationship. */
.sa-btn-stream .sa-btn-icon-bg {
  position: absolute;
  inset: 0;
  background-color: oklch(from var(--sa-btn-color, var(--primary, #111111)) calc(l + 0.2) c h);
  border-radius: 4px; /* icon-bg square — intentionally not affected by --sa-btn-radius */
  /* Slow return to square on hover-out */
  transition: border-radius 0.825s cubic-bezier(.6,.6,0,1),
              transform 0.425s cubic-bezier(.6,.6,0,1);
}

.sa-btn-stream:hover .sa-btn-icon-bg {
  border-radius: 50%;
  transform: rotate(90deg);
  /* Fast morph to circle on hover-in */
  transition: border-radius 0.425s cubic-bezier(.6,.6,0,1),
              transform 0.425s cubic-bezier(.6,.6,0,1);
}

/* Clip box — overflow:hidden clips arrows by their visual/painted position */
.sa-btn-stream .sa-btn-icon-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Positioning parent for the 3 stacked arrows */
.sa-btn-stream .sa-btn-icon-list {
  position: relative;
  width: 100%;
  height: 100%;
}

/* All 3 arrows stacked at top-left, offset by transform per nth-child.
   Arrow 3 starts visible, arrows 2+1 start off-screen to the left.
   On hover each moves +200% right, streaming one after another. */
.sa-btn-stream .sa-btn-icon-arrow {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--sa-stream-icon);
  height: var(--sa-stream-icon);
  padding: 0.2em;
  transition: transform 0.425s cubic-bezier(.6,.6,0,1);
}

.sa-btn-stream .sa-btn-icon-arrow:nth-child(1) { transform: translateX(-200%); }
.sa-btn-stream .sa-btn-icon-arrow:nth-child(2) { transform: translateX(-100%); }
.sa-btn-stream .sa-btn-icon-arrow:nth-child(3) { transform: translateX(0%);    }

.sa-btn-stream:hover .sa-btn-icon-arrow:nth-child(1) { transform: translateX(0%);    }
.sa-btn-stream:hover .sa-btn-icon-arrow:nth-child(2) { transform: translateX(100%);  }
.sa-btn-stream:hover .sa-btn-icon-arrow:nth-child(3) { transform: translateX(200%);  }

.sa-btn-stream .sa-btn-icon-arrow::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14'%3E%3Cpath stroke='white' stroke-linecap='square' stroke-width='.75' d='M7.875 2.625 12.25 7m0 0-4.375 4.375M12.25 7H1.75'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}


/* ===========================================
   REDUCED MOTION
   Disable all transitions and animations for
   users who prefer reduced motion.
   =========================================== */

@media (prefers-reduced-motion: reduce) {
  .sa-btn-primary,
  .sa-btn-outline,
  .sa-btn-slide,
  .sa-btn-primary .sa-btn-icon::before,
  .sa-btn-primary .sa-btn-icon::after,
  .sa-btn-outline .sa-btn-icon::before,
  .sa-btn-outline .sa-btn-icon::after,
  .sa-btn-stream .sa-btn-icon-bg,
  .sa-btn-stream .sa-btn-icon-arrow {
    transition: none !important;
  }
}