/* Block: check-pill
 *
 * Figma: 53px tall at a 30px radius, 1px violet rule, 16px Medium label with
 * the 20 x 14 tick 18px in from the edge.
 */
.check-pill {
    display: flex;
    align-items: center;
    gap: calc(15 * var(--tgc-u));
    min-height: calc(53 * var(--tgc-u));
    padding: calc(12 * var(--tgc-u)) calc(24 * var(--tgc-u)) calc(12 * var(--tgc-u)) calc(18 * var(--tgc-u));
    border: 1px solid transparent;
    border-radius: calc(30 * var(--tgc-u));
    color: var(--tgc-ink);
}

.check-pill__tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(20 * var(--tgc-u));
    flex-shrink: 0;
    color: var(--tgc-violet);
}

.check-pill__tick svg {
    display: block;
    width: calc(20 * var(--tgc-u));
    height: calc(14 * var(--tgc-u));
}

.check-pill__text {
    font-size: calc(16 * var(--tgc-ut));
    font-weight: 500;
    line-height: calc(26 * var(--tgc-ut));
}

/* Bordered pill. The fill is left open so it reads white on white sections
   and cream on cream ones, the way the designs do. */
.check-pill--outline,
.check-pill--plain {
    border-color: var(--tgc-violet);
}

.check-pill--plain {
    padding: 11px calc(20 * var(--tgc-u));
}

.check-pill--violet {
    border-color: var(--tgc-violet);
    background-color: var(--tgc-violet);
    color: var(--theme-white);
}

.check-pill--violet .check-pill__tick {
    color: var(--theme-white);
}

@media (max-width: 768px) {
    .check-pill {
        min-height: 46px;
        padding: 10px 16px;
    }

    .check-pill--plain {
        padding: 10px calc(16 * var(--tgc-u));
    }

    .check-pill__text {
        font-size: calc(14 * var(--tgc-ut));
    }
}