@charset "UTF-8";
@use "../../core/jkl";

.jkl-tag {
    --padding: var(--jkl-unit-02) var(--jkl-unit-10);
    --gap: var(--jkl-unit-05);
    --background-color: var(--jkl-color-background-alert-neutral);
    --text-color: var(--jkl-color-text-on-alert);

    @include jkl.text-style("text-small") {
        font-weight: jkl.$typography-weight-bold;
    };
    background-color: var(--background-color);
    color: var(--text-color);
    border-radius: jkl.rem(4px);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: var(--padding);
    gap: var(--gap);

    &--info {
        --background-color: var(--jkl-color-background-alert-info);
    }

    &--warning {
        --background-color: var(--jkl-color-background-alert-warning);
    }

    &--error {
        --background-color: var(--jkl-color-background-alert-error);
    }

    &--success {
        --background-color: var(--jkl-color-background-alert-success);
    }

    @include jkl.forced-colors-mode {
        border: 2px none CanvasText;
        border-bottom-style: dotted;

        &--info {
            border-style: dotted;
        }

        &--warning {
            border-style: dashed;
        }

        &--error {
            border-style: double;
            border-width: 4px;
        }

        &--success {
            border-style: solid;
        }
    }
}