/* Bifrost button. Source of truth: components/bifrost-button.html */
.bf {
    --bw: 1px; --gsize: 30px; --gblur: 22px; --rad: 23px;
    position: relative;
    display: inline-block;
    padding: var(--bw);
    border-radius: var(--rad);
    isolation: isolate;
  }
  .bf-edge, .bf-halo { position: absolute; border-radius: inherit; overflow: hidden; pointer-events: none; }
  .bf-edge { inset: 0; z-index: -1; }
  .bf-halo {
    inset: calc(-1 * var(--gsize));
    border-radius: calc(var(--rad) + var(--gsize));
    z-index: -2;
    filter: blur(var(--gblur));
  }
  .bf-spin {
    position: absolute;
    left: 50%; top: 50%;
    width: 250%;
    aspect-ratio: 1;
    margin: -125% 0 0 -125%;
    background: conic-gradient(#ff3b5c, #ff9a3b, #ffe14d, #4dff9a, #3bd5ff, #5b6cff, #c04dff, #ff3b5c);
    will-change: transform;
  }
  .bf-tint { position: absolute; inset: 0; opacity: 1; transition: opacity .3s ease; }
  .bf > button {
    display: block;
    border: 0;
    border-radius: calc(var(--rad) - var(--bw));
    padding: var(--btn-pad, 18px 36px);
    background: var(--btn-bg);
    color: var(--btn-text);
    font: 400 1.05rem/1.2 var(--btn-font, "Russo One", "Cinzel", Georgia, sans-serif);
    letter-spacing: 0.06em; text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  .bf > button:focus-visible { outline: 2px solid var(--btn-text); outline-offset: 10px; }
  /* a link or a whole box can wear the ring too */
  .bf > a.bf-link { display: block; border: 0; border-radius: calc(var(--rad) - var(--bw)); background: var(--surface); position: relative; }
  .bf > a.bf-link:hover { background: var(--surface-2); text-decoration: none; }
  .bf > .bf-box { display: block; border-radius: calc(var(--rad) - var(--bw)); background: var(--surface); position: relative; }
  .bf.bf-block { display: block; }