// Responsive breakpoint control
@mixin smaller-than($size) {
    @media screen and (max-width: $size) { @content; }
}
@mixin larger-than($size) {
    @media screen and (min-width: $size) { @content; }
}
@mixin between($min, $max) {
  @media screen and (min-width: $min) and (max-width: $max) { @content; }
}

// Padding shorthand using logical operators to better support RTL.
@mixin padding($t, $r, $b, $l) {
  padding-block-start: $t;
  padding-block-end: $b;
  padding-inline-start: $l;
  padding-inline-end: $r;
}

// Margin shorthand using logical operators to better support RTL.
@mixin margin($t, $r, $b, $l) {
  margin-block-start: $t;
  margin-block-end: $b;
  margin-inline-start: $l;
  margin-inline-end: $r;
}

// Create a RTL specific style block.
// Mostly used as a patch until browser support improves for logical properties.
@mixin rtl() {
  html[dir=rtl] & {
    @content;
  }
}

// Define a property for both light and dark mode
@mixin lightDark($prop, $light, $dark, $important: false) {
  #{$prop}: if($important, $light !important, $light);
  html.dark-mode & {
    #{$prop}: if($important, $dark !important, $dark);
  }
}

@mixin whenDark {
    html.dark-mode & {
      @content;
    }
}