@use '../settings';
@use '../mixin';

@mixin roolith-state() {
    @each $breakpoint, $value in settings.$breakpoints {
        .show-#{$breakpoint}-only {
            display: none;

            @include mixin.breakpoint(#{$breakpoint}-only) {
                display: block;
            }
        }

        .show-#{$breakpoint}-up {
            display: none;

            @include mixin.breakpoint(#{$breakpoint}-up) {
                display: block;
            }
        }

        .hide-#{$breakpoint}-only {
            @include mixin.breakpoint(#{$breakpoint}-only) {
                display: hide;
            }
        }

        .hide-#{$breakpoint}-up {
            @include mixin.breakpoint(#{$breakpoint}-up) {
                display: hide;
            }
        }
    }

    .clearfix {
        @include mixin.clearfix();
    }

    .is-hidden {
        display: none !important;
    }

    .is-visible {
        display: block !important;
    }

    .is-disabled {
        pointer-events: none;
        opacity: 0.5;
    }

    .is-dimmed {
        opacity: 0.5;
    }
}