@import '../../styles/colors', '../../styles/fonts', '../../styles/fontSizeCalculator';

.ui.label {
    align-items: center;
    background-color: color(backgroundColorLight);
    box-shadow: inset 0 0 0 1px color(borderColor);
    border-radius: 3px;
    color: color(color);
    display: inline-flex;
    font-size: rem(14px);
    font-weight: $fontWeightRegular;
    height: 30px;
    justify-content: flex-start;
    letter-spacing: 1px;
    line-height: 1;
    margin-right: 11px;
    outline: none;
    overflow: hidden;
    padding: 0 rem(11px);
    text-align: left;
    text-decoration: none;
    text-transform: capitalize;
    transition: background-color 125ms linear, color 125ms linear, opacity 250ms ease-out;
    white-space: normal;
    &.label-color- {
        &alert, &highlight, &success,
        &warning {
            box-shadow: none;
            color: color(colorInverse);
            font-weight: $fontWeightSemiBold;
        }
        &alert { background-color: color(backgroundColorAlert); }
        &highlight { background-color: color(backgroundColorHighlight); }
        &primary { background-color: color(backgroundColorLight); box-shadow: inset 0 0 0 1px color(borderColor); }
        &success { background-color: color(backgroundColorSuccess); }
        &transparent { background-color: transparent; box-shadow: none; }
        &warning { background-color: color(backgroundColorWarning); }
    }
    &.label-inverse.label-color- {
        &alert, &highlight, &success,
        &warning {
            box-shadow: none;
            color: color(colorInverse);
            font-weight: $fontWeightSemiBold;
        }
        &alert { background-color: color(backgroundColorAlert); }
        &highlight { background-color: color(backgroundColorHighlight); }
        &primary { background-color: color(backgroundColorLight); box-shadow: inset 0 0 0 1px color(borderColor); }
        &success { background-color: color(backgroundColorSuccess); }
        &transparent { background-color: transparent; color: color(colorInverse); font-weight: $fontWeightSemiBold; }
        &warning { background-color: color(backgroundColorWarning); }
    }
    &.label-clearable {
        padding-right: 0;
        .label-clearable-button {
            align-items: center;
            background-color: color(backgroundColorStatic);
            border-radius: 0 3px 3px 0;
            box-shadow: inset 1px 0 0 color(borderColorTertiary);
            color: color(colorInverse);
            cursor: pointer;
            display: inline-flex;
            height: 30px;
            justify-content: center;
            margin: 0 0 0 11px;
            transition:
                background-color 150ms linear,
                box-shadow 150ms linear,
                color 75ms linear;
            width: 20px;
            .ui.icon { color: inherit; }
            &:hover { background-color: transparent; box-shadow: inset 1px 0 0 color(borderColor); color: color(colorStatic); }
        }
        &.label-color- {
            &alert, &highlight, &success, &warning {
                .label-clearable-button {
                    box-shadow: none;
                    &:hover { background-color: transparent; color: color(colorInverse); }
                }
            }
            &alert .label-clearable-button {
                background-color: color(backgroundColorAlertDark);
                &:hover { box-shadow: inset 1px 0 0 color(backgroundColorAlertDark); }
            }
            &highlight .label-clearable-button {
                background-color: color(backgroundColorHighlight);
                box-shadow: inset 1px 0 0 color(backgroundColorHighlightDark);
                &:hover {
                    background-color: color(backgroundColorHighlightDark);
                }
            }
            &primary .label-clearable-button {
                background-color: color(backgroundColorStatic);
                box-shadow: inset 1px 0 0 color(borderColorTertiary);
                &:hover { background-color: transparent; box-shadow: inset 1px 0 0 color(borderColor); color: color(colorStatic); }
            }
            &success .label-clearable-button {
                background-color: color(backgroundColorSuccess);
                box-shadow: inset 1px 0 0 color(backgroundColorSuccessDark);
                &:hover {
                    background-color: color(backgroundColorSuccessDark);
                }
            }
            &transparent .label-clearable-button {
                background-color: transparent;
                box-shadow: none;
                color: color(colorStatic);
            }
            &warning .label-clearable-button {
                background-color: color(backgroundColorWarningDark);
                &:hover { box-shadow: inset 1px 0 0 color(backgroundColorWarningDark); }
            }
        }
    }
    &.label-clickable { cursor: pointer; }
    &.label-fluid { width: 100%; }
    .label-inner-container { width: 100%; }
}