@import '../../../styles/variables';

.status {
    display: inline-block;
    position: relative;
    cursor: help;
    padding: .5rem;
}

// default: red square
.statusIndicator {
    width: $font-size-small;
    height: $font-size-small;
    display: block;
    background: $red;
}

// yellow triangle
.statusIndicatorCloseEnough {
    composes: statusIndicator;
    background: none;
    width: 0;
    height: 0;
    border-left: $font-size-small / 1.7 solid transparent;
    border-right: $font-size-small / 1.7 solid transparent;
    border-bottom: $font-size-small solid $yellow;
}

// green circle
.statusIndicatorActive {
    composes: statusIndicator;
    border-radius: 50%;
    background: $green;
}