wagtail/client/scss/components/_indicator.scss

@use "sass:math";
// =============================================================================
// Indicator light
// =============================================================================


// =============================================================================
// Indicator light
// =============================================================================
$c-indicator-size: 0.625em;
$c-indicator-margin: 0.25rem;

.c-indicator {
    display: inline-block;
    border-radius: 50rem;
    width: $c-indicator-size;
    height: $c-indicator-size;
    margin-top: -0.125rem;
    margin-right: $c-indicator-margin;
    font-size: 1rem;
    vertical-align: middle;
}

// =============================================================================
// States
// =============================================================================
.is-absent .c-indicator {
    background: $color-state-absent;
}

.is-live .c-indicator {
    background: $color-state-live;
}

.is-draft .c-indicator {
    background: $color-state-draft;
}

// This is hipster. But it works.
.is-live\+draft .c-indicator {
    background: $color-state-draft;
    position: relative;

    &:before {
        content: '';
        width: math.div($c-indicator-size, 2);
        height: $c-indicator-size;
        position: absolute;
        top: 0;
        left: 0;
        border-bottom-left-radius: 50rem;
        border-top-left-radius: 50rem;
        background: $color-state-live;
        transform: rotate(45deg);
        transform-origin: 100% 50%;
    }
}