@use '../variables.scss' as var;

@mixin SnTag {
    .#{var.$classPrefix}Tag {
        font-size: 0.8rem;
        line-height: 1rem;
        height: auto;
        padding: 0 0.3rem;
        display: inline-block;
        border-radius: 0.2em;

        &.primary {
            background: var(--sn-color-1);
            color: var(--sn-color-1-i);
        }

        &.success {
            background: var(--sn-green);
            color: var(--sn-green-i);
        }

        &.warning {
            background: var(--sn-yellow);
            color: var(--sn-yellow-i);
        }

        &.danger {
            background: var(--sn-red);
            color: var(--sn-red-i);
        }
    }
}