@use '../../scss/config.scss' as *;

.badge {
    @include transition();
    @include spacing(py-xs, px-sm);
    @include border-radius(xs);
    @include layout(inline-flex, v-center, xs);
    @include typography(sm, primary-50);
    @include border(0);
    @include background(primary);

    &.hover {
        cursor: pointer;

        &:hover {
            @include background(primary-20);
        }

        &.secondary:hover {
            @include background(primary-40);
        }

        &.outline:hover {
            @include background(primary-60);
            box-shadow: inset 0px 0px 0px 1px var(--w-color-primary);
        }

        &.flat:hover {
            @include background(primary-40);
        }

        &.info:hover {
            @include background(info-accent);
        }

        &.success:hover {
            @include background(success-accent);
        }

        &.warning:hover {
            @include background(warning-accent);
        }

        &.alert:hover {
            @include background(alert-accent);
        }
    }

    
    &.secondary {
        @include typography(primary);
        @include background(primary-50);
    }

    &.outline {
        @include typography(primary);
        @include background(transparent);
        box-shadow: inset 0px 0px 0px 1px var(--w-color-primary-40);
    }

    &.flat {
        @include typography(primary);
        @include background(transparent);
    }

    &.info {
        @include typography(info-fg);
        @include background(info);
    }

    &.success {
        @include typography(success-fg);
        @include background(success);
    }

    &.warning {
        @include typography(warning-fg);
        @include background(warning);
    }

    &.alert {
        @include typography(alert-fg);
        @include background(alert);
    }

    &.small {
        @include spacing(py-xxs, px-xs);
    }

    &.round {
        @include border-radius(lg);
    }

    &.transparent {
        @include background(transparent);
        @include typography(primary);
        @include spacing(p0);

        &.secondary {
            @include typography(primary-20);
        }

        &.info {
            @include typography(info);
        }

        &.success {
            @include typography(success);
        }

        &.warning {
            @include typography(warning);
        }

        &.alert {
            @include typography(alert);
        }
    }
}