@use './variables';
@use './mixins/border-radius' as br;

.label {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: normal;
    text-transform: uppercase;
    line-height: 16px;
    padding: 0 3px;
    border: 1px solid;
    border-color: black;
    background: black;
    vertical-align: baseline;

    &.label-badge {
        color: variables.get-color('gray', 4x-light);
        background: variables.get-color('gray', light);
        border-color: variables.get-color('gray', light);
    }
    &.label-danger {
        color: #ffffff;
        background: variables.get-color('tertiary');
        border-color: variables.get-color('tertiary');
    }
    &.label-alt {
        color: variables.get-color('alt', light);
        background: variables.get-color('gray', dark);
        border-color: variables.get-color('gray', dark);
    }
    &.label-new {
        color: #ffffff;
        background: variables.get-color('tertiary');
        border-color: variables.get-color('tertiary');
    }
    &.label-beta {
        color: variables.get-color('alt');
        background: transparent;
        border-color: variables.get-color('alt');
    }
    &.label-op {
        text-transform: initial;
        color: #ffffff;
        background: variables.get-color('secondary', base);
        border-color: variables.get-color('secondary', base);
    }
    &.label-alt-badge {
        color: #000000;
        background: variables.get-color('alt');
        border-color: variables.get-color('alt');
    }
}
.label-round {
    padding: 0 7px;
    @include br.border-right-radius(9px);
    @include br.border-left-radius(9px);
}