@use 'sass:map';
@use './variables' as mbi;

@mixin core($name: '') {
  $core-name: '.' + mbi.$core;

  @if $name != '' {
    $core-name: $core-name + '-' + $name;
  }

  #{$core-name} {
    @content;
  }
}

// BEGIN: Device Width

@mixin device($key) {
  @if map.has-key(mbi.$device, $key) {
    $value: map.get(mbi.$device, $key);

    @media (min-width: $value) {
      @content;
    }
  }
}

@mixin devices {
  @each $name, $value in mbi.$device {
    @media (min-width: $value) {
      &-#{$name} {
        @content;
      }
    }
  }
}

@mixin style-with-devices {
  @content;

  @include devices {
    @content;
  }
}

// BEGIN: Device Width