@use "../../01-core/prefix" as *;
@use "./range.mixins" as range;

@layer ss.components {
    .#{$ss-prefix-module}-range {
        @include range.ss-range;
        @include range.ss-range-size(md);
    }
    .#{$ss-prefix-module}-range--xs { @include range.ss-range-size(xs); }
    .#{$ss-prefix-module}-range--sm { @include range.ss-range-size(sm); }
    .#{$ss-prefix-module}-range--lg { @include range.ss-range-size(lg); }

    .#{$ss-prefix-module}-range--primary {
        @include range.ss-range-variant(var(--ss-color-primary, var(--ss-color-accent)));
    }
    .#{$ss-prefix-module}-range--success {
        @include range.ss-range-variant(var(--ss-color-success));
    }
    .#{$ss-prefix-module}-range--warning {
        @include range.ss-range-variant(var(--ss-color-warning));
    }
    .#{$ss-prefix-module}-range--error {
        @include range.ss-range-variant(var(--ss-color-error));
    }
}