/* ==========================================================================
   TOPPERWORK — REUSABLE VERIFICATION BADGE
   ========================================================================== */

.topperwork-verification-badge {
    --topperwork-verification-badge-size: 18px;
    --topperwork-verification-badge-color: #7C8798;

    position: relative;

    display: inline-block;

    flex: 0 0 var(--topperwork-verification-badge-size);

    width: var(--topperwork-verification-badge-size);
    height: var(--topperwork-verification-badge-size);

    vertical-align: -0.18em;

    isolation: isolate;
}


.topperwork-verification-badge::before {
    content: '';

    position: absolute;
    inset: 0;

    background: var(--topperwork-verification-badge-color);

    -webkit-mask:
        url('/assets/images/icons/verification-badge-shape.svg')
        center / contain
        no-repeat;

    mask:
        url('/assets/images/icons/verification-badge-shape.svg')
        center / contain
        no-repeat;
}


.topperwork-verification-badge::after {
    content: '';

    position: absolute;

    left: 38%;
    top: 23%;

    width: 24%;
    height: 43%;

    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;

    transform: rotate(45deg);
    transform-origin: center;

    box-sizing: border-box;
}


.topperwork-verification-badge--verified {
    --topperwork-verification-badge-color: #3B82F6;
}


.topperwork-verification-badge--unverified {
    --topperwork-verification-badge-color: #7C8798;
}


.topperwork-verification-badge--xs {
    --topperwork-verification-badge-size: 14px;
}


.topperwork-verification-badge--sm {
    --topperwork-verification-badge-size: 17px;
}


.topperwork-verification-badge--md {
    --topperwork-verification-badge-size: 18px;
}


.topperwork-verification-badge--lg {
    --topperwork-verification-badge-size: 22px;
}


@media (prefers-reduced-motion: reduce) {
    .topperwork-verification-badge {
        transition: none;
    }
}