@use "sass:meta";

@mixin media($from: false, $to: false) {
  @if (meta.type-of($from) != "bool" and meta.type-of($from) != "number") or (meta.type-of($to) != "bool" and meta.type-of($to) != "number") {
    @error "Invalid arguments for media mixin" #{meta.type-of($from)} #{meta.type-of($to)};
  }
  @if $from and $to {
    @media screen and (min-width: $from) and (max-width: $to - 1px) {
      @content;
    }
  } @else if $from {
    @media screen and (min-width: $from) {
      @content;
    }
  } @else if $to {
    @media screen and (max-width: $to - 1px) {
      @content;
    }
  }
}

@mixin layout($focus-mode) {
  @if meta.type-of($focus-mode) != "bool" {
    @error "Invalid arguments for layout mixin" #{meta.type-of($focus-mode)};
  }
  .Lab-root {
    @if $focus-mode {
      &[data-mode="focus"] {
        --lab-side-width: 0px;
        --lab-nav-width: 0px;

        --lab-side-display: none;
        --lab-nav-display: none;
        @content
      }
    } @else {
      &[data-mode="default"] {
        --lab-consoles-width: 0px;

        --lab-consoles-display: none;
        @content
      }
    }
  }
}
