/* =========================
   RB pill button shortcode v1.1
   HTML variant with edge icon + hover sweep
   ========================= */

/* Defaults (can be overridden inline via style tokens) */
:root{
  --btn-bg:#1f5e78;
  --btn-fg:#fff;
  --btn-border:#1f5e78;
  --btn-hover-bg:#fff;
  --btn-hover-fg:#1f5e78;
  --btn-ring:rgba(31,94,120,.20);
  --btn-radius:30px;
  --btn-icon-size:48px;
  --btn-icon-font:"Font Awesome 6 Free";
  --btn-sweep-dur:.35s;
}

.rb-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-border);
  border-radius: var(--btn-radius);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--btn-sweep-dur) ease, border-color var(--btn-sweep-dur) ease, box-shadow var(--btn-sweep-dur) ease;
  box-shadow: 0 0 0 0 var(--btn-ring);
  line-height: 1;
}

/* Sweep background */
.rb-btn::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:0;
  background: var(--btn-hover-bg);
  z-index:0;
  transition: width var(--btn-sweep-dur) ease;
}
.rb-btn:hover::after,
.rb-btn:focus-visible::after{ width:100%; }

.rb-btn:hover,
.rb-btn:focus-visible{
  color: var(--btn-hover-fg);
  border-color: var(--btn-hover-fg);
  box-shadow: 0 0 0 4px var(--btn-ring);
  outline: none;
}

/* Content above sweep */
.rb-btn > *{ position: relative; z-index:1; }

/* Icon disk */
.rb-btn__icon{
  position:absolute;
  left:-2px;
  top:50%;
  transform:translateY(-50%);
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  border-radius:999px;
  background:#fff;
  color:var(--btn-bg);
  display:grid;
  place-items:center;
  transition: transform var(--btn-sweep-dur) ease, background-color var(--btn-sweep-dur) ease, color var(--btn-sweep-dur) ease;
  z-index:2;
}
.rb-btn__icon i{ font-family: var(--btn-icon-font); font-size:20px; line-height:1; }
.rb-btn__icon img{ width:20px; height:20px; display:block; }

/* Hover nudge; remove rim/border on the disk */
.rb-btn:hover .rb-btn__icon,
.rb-btn:focus-visible .rb-btn__icon{
  transform: translateY(-50%) translateX(2px);
  box-shadow: none; /* no border around the icon in hover */
}

/* Label */
.rb-btn__label{ white-space: nowrap; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .rb-btn, .rb-btn__icon { transition: none; }
}