.color-dot {
    --background-color: var(--success-60);
    --size: #{$color-dot-size};

    display: inline-block;
    width: var(--size);
    min-width: var(--size);
    height: var(--size);
    min-height: var(--size);
    background-color: var(--background-color);
    border-radius: 100%;

    &.mod-small {
        --size: 8px;
    }

    &.state-critical {
        --background-color: var(--critical-70);
    }

    &.state-major {
        --background-color: var(--sienna-orange-60);
    }

    &.state-minor {
        --background-color: var(--warning-70);
    }

    &.state-warning {
        --background-color: var(--turbo-yellow-50);
    }

    &.state-info {
        --background-color: var(--info-60);
    }

    &.state-disabled {
        --background-color: var(--grey-20);

        border: 1px solid var(--grey-60);
    }

    &.state-waiting {
        --background-color: var(--grey-60);
    }

    &.state-new {
        --background-color: var(--bright-turquoise-30);
    }

    &.state-maintenance {
        --background-color: var(--navy-blue-20);
    }

    &.state-executing {
        animation: scaleoutCentered 1s infinite ease-in-out;
    }
}