/* StillHuman Design: button style "Split ticket".
   An outline button with an icon block on the right. On hover the block floods the whole button.
   Colours come from --bx (main) and --bx-ink (text on the filled block); modifiers below change them. */

.bx{font-family:var(--font-b);text-decoration:none;cursor:pointer}

.bx-e{--bx:var(--accent);--bx-ink:var(--accent-ink);position:relative;display:inline-flex;align-items:center;overflow:hidden;padding:0 76px 0 0;border:1.5px solid var(--bx);background:transparent;color:var(--bx);font:700 1rem/1 var(--font-b)}
.bx-e .t{position:relative;z-index:1;padding:20px 28px;transition:color .35s}
.bx-e .i{position:absolute;right:0;top:0;bottom:0;width:58px;display:flex;align-items:center;justify-content:flex-end;padding-right:19px;box-sizing:border-box;background:var(--bx);color:var(--bx-ink);transition:width .55s var(--ease)}
.bx-e .i svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--out)}
.bx-e:hover .i{width:calc(100% + 2px)}
.bx-e:hover .t{color:var(--bx-ink)}
.bx-e:hover .i svg{transform:translateX(2px)}
.bx-e:hover .i svg.plane{transform:translate(3px,-3px)}
.bx-e:focus-visible{outline:3px solid var(--accent);outline-offset:4px;box-shadow:none}

/* on a light background */
.bx-e.light{--bx:#111316;--bx-ink:#e3e5e7}
/* takes the colour of the text around it (used in the header, which blends with the page) */
.bx-e.mono{--bx:#fff;--bx-ink:#000}
/* compact size for the header */
.bx-e.sm{padding-right:46px;font-size:.92rem}
.bx-e.sm .t{padding:10px 16px}
.bx-e.sm .i{width:36px;padding-right:10px}
.bx-e.sm .i svg{width:17px;height:17px}
.bx-e.sm:hover .i{width:calc(100% + 2px)}

@media (prefers-reduced-motion:reduce){.bx-e .i,.bx-e .i svg,.bx-e .t{transition:none}}