.btn--pill {
    padding: 2rem 2.8rem;
    border-radius: 10rem;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
}

.btn--pill.btn--has-dot .btn__text-holder:before {
    width: 1rem;
    height: 1rem;
    margin-right: 3.2rem;
}

/*
 * The hover fill is a transformed ::before clipped by the pill radius.
 * At some sizes that layer stops a fraction short of the curve, so the
 * original background shows through. Oversizing the fill, plus a matching
 * background once the wipe finishes, closes that edge.
 */
.btn--pill:is(
    .btn--pill-yellow,
    .btn--pill-white,
    .btn--pill-black,
    .btn--pill-black-white,
    .btn--pill-black-yellow,
    .btn--pill-blue,
    .btn--pill-blue-yellow
) {
    transition-duration: 0s, 0.5s, 0.5s, 0.5s, 0.5s, 0.5s, 0.5s, 0.5s;
}

.btn--pill:is(
    .btn--pill-yellow,
    .btn--pill-white,
    .btn--pill-black,
    .btn--pill-black-white,
    .btn--pill-black-yellow,
    .btn--pill-blue,
    .btn--pill-blue-yellow
):before {
    width: calc(150% + 24px);
    height: calc(200% + 24px);
    left: calc(-25% - 12px);
    top: calc(-50% - 12px);
    background: var(--pill-hover);
    box-shadow: 0 0 0 8px var(--pill-hover);
}

.btn--pill:is(
    .btn--pill-yellow,
    .btn--pill-white,
    .btn--pill-black,
    .btn--pill-black-white,
    .btn--pill-black-yellow,
    .btn--pill-blue,
    .btn--pill-blue-yellow
):hover {
    background-color: var(--pill-hover);
    transition-delay: 0.5s, 0s, 0s, 0s, 0s, 0s, 0s, 0s;
}

.btn--pill:is(
    .btn--pill-yellow,
    .btn--pill-white,
    .btn--pill-black,
    .btn--pill-black-white,
    .btn--pill-black-yellow,
    .btn--pill-blue,
    .btn--pill-blue-yellow
):hover:before {
    transform: scale(1.08, 1.06);
}

.btn--pill-yellow {
    --pill-hover: #fff;
    background: #FFD500;
    color: #111;
}

.btn--pill-yellow:hover {
    color: #111;
}

.btn--pill-white {
    --pill-hover: #ffd500;
    background: #fff;
    color: #111;
}

.btn--pill-white:hover {
    color: #111;
}

.btn--pill-black {
    --pill-hover: #FFD500;
    background: #111;
    color: #fff;
}

.btn--pill-black:hover {
    color: #111;
}

.btn--pill-black-white {
    --pill-hover: #fbce04;
    background: #000;
    color: #fff;
}

.btn--pill-black-white:hover {
    color: #000;
}

.btn--pill-black-yellow {
    --pill-hover: #f7f7f7;
    background: #000;
    color: #fbce04;
}

.btn--pill-black-yellow:hover {
    color: #fbce04;
}

.btn--pill-blue {
    --pill-hover: #f7f7f7;
    background: #2A59DE;
    color: #fff;
}

.btn--pill-blue:hover {
    color: #111;
}

.btn--pill-blue-yellow {
    --pill-hover: #FFD500;
    background: #2A59DE;
    color: #fff;
}

.btn--pill-blue-yellow:hover {
    color: #111;
}

.btn--pill-outline {
    background: transparent;
    color: #111;
    border: 1px solid #111;
}

.btn--pill-outline:hover {
    background: #fbce04;
    border-color: #fbce04;
    color: #111;
}

.btn--pill-outline-white {
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
}

.btn--pill-outline-white .arrow-carousel__icon img {
    filter: brightness(0) invert(1);
}

.btn--pill-outline-white:hover {
    background: #fbce04;
    border-color: #fbce04;
    color: #111;
}

.btn--pill-outline-white:hover .arrow-carousel__icon img {
    filter: none;
}