/*
 * Rotating Badge styles, lifted from graviteit-widgets/assets/arrow-buttons.css.
 * Class names kept as .gft-rb* so the widget markup did not have to be touched.
 */

/* Defaults, overridden by the Inner Ring Size / Band Color controls. */
.gft-rb { --gft-rb-inner: 60%; --gft-rb-band: transparent; }

/*
 * The band: a ring between the inner circle and the outer edge, middle left clear.
 * `closest-side` makes 100% land on the outer edge (the default farthest-corner would
 * put it out at the square's corner and the ring would come out too thin). The inner
 * circle's width is a percentage of the badge, so its radius is the same percentage of
 * that ray -- which is why the stop can reuse --gft-rb-inner directly.
 */
.gft-rb {
  background-image: radial-gradient( circle closest-side,
      transparent 0 var(--gft-rb-inner),
      var(--gft-rb-band) var(--gft-rb-inner),
      var(--gft-rb-band) 100% );
}

.gft-rb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 1px solid currentColor;
  position: relative;
  text-decoration: none !important;
  color: inherit;
  background-color: transparent;   /* longhand: `background:` would reset the band gradient */
  overflow: visible;
}

.gft-rb__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: gft-rb-spin 15s linear infinite;
  overflow: visible;
}

.gft-rb__text {
  fill: currentColor;
  font-size: 7.6px; /* sized relative to the 100-unit viewBox */
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
}

.gft-rb__inner {
  width: 60%;
  height: 60%;
  border-radius: 50%;
  border: 1px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.gft-rb__center {
  font-size: 1.5em;
  line-height: 1;
}

@keyframes gft-rb-spin {
  to { transform: rotate(360deg); }
}

/* ── Centre content: text, icon or image ─────────────────────────────────── */

.gft-rb__center {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* The inner circle already clips to a circle, so an image only needs to fill it. */
.gft-rb__center--image { width: 100%; height: 100%; overflow: hidden; border-radius: 50%; }
.gft-rb__img { display: block; object-fit: contain; }
.gft-rb__img.is-fill { object-fit: cover; border-radius: 50%; }

/* Icons inherit the badge colour like the text does -- but only where the icon has no
   paint of its own (Font Awesome's SVGs); an exported SVG carries its own fills. */
.gft-rb__center svg { fill: currentColor; display: block; }
.gft-rb__center i   { color: currentColor; }

/*
 * Recolouring an uploaded SVG.
 *
 * `fill` on the <svg> alone is not enough: it only reaches children that have no paint
 * of their own, and Elementor inlines exported SVGs with their `style="fill: ..."`
 * attributes intact. Those inline declarations outrank a normal stylesheet rule, hence
 * !important and the descendant selector.
 *
 * The class is only present when a colour was set (see render()), so an untouched badge
 * keeps whatever colours the icon was drawn with.
 */
.gft-rb--icolor-fill   .gft-rb__center svg,
.gft-rb--icolor-fill   .gft-rb__center svg *,
.gft-rb--icolor-both   .gft-rb__center svg,
.gft-rb--icolor-both   .gft-rb__center svg *   { fill:   var( --gft-rb-icon ) !important; }

.gft-rb--icolor-stroke .gft-rb__center svg,
.gft-rb--icolor-stroke .gft-rb__center svg *,
.gft-rb--icolor-both   .gft-rb__center svg,
.gft-rb--icolor-both   .gft-rb__center svg *   { stroke: var( --gft-rb-icon ) !important; }

/* Icon fonts have no fill to override -- they are text. */
.gft-rb--icolor-fill   .gft-rb__center i,
.gft-rb--icolor-stroke .gft-rb__center i,
.gft-rb--icolor-both   .gft-rb__center i       { color:  var( --gft-rb-icon ) !important; }