@use "sass:meta";
@use "../lib/mixin";
@use "../settings";

/*
Hidden

The hidden module.

Weight: -100

Style guide: #{settings.$util-prefix}.hidden
*/

/*
Modifiers

The hidden modifiers.
+ The breakpoint prefixes can be specified like as `sm:#{settings.$util-prefix}--hidden`.

Weight: -100

Markup: <div class="hidden-example {{modifier_class}}"></div>
<style>
  :where(.hidden-example) {
    position: relative;
    width: 50px;
    height: 50px;
    background: #999;
  }
</style>

#{settings.$util-prefix}--hidden - Hidden element.

Style guide: #{settings.$util-prefix}.hidden.builtin
*/
.#{settings.$util-prefix}--hidden {
  @include mixin.by-breakpoints() {
    --display: none;

    display: var(--display);
  }
}