////////////////////////////////////////////////////////////////////////////////
/// Browser                                                             #browser
////////////////////////////////////////////////////////////////////////////////

@use 'modules/context' as *;

/// @example @include browser('safari') { ... }
/// @example @include browser('safari', 15) { ... }

@mixin browser($name, $version:false) {

  $browserSelector : '[data-browser-name="#{$name}"]';
  $versionSelector : if($version, '[data-browser-version="#{$version}"]', '');

  @at-root :root#{$browserSelector}#{$versionSelector} & {
    @content;
  }

}

@mixin feature($rules...) {
  @include context('feature', (bodyOnly : true), $rules...) { @content; }
}

@mixin firefox($version:false) {
  @include browser('firefox', $version) { @content; };
}

@mixin ie($version:false) {
  @include browser('ie', $version) { @content; };
}

@mixin chrome($version:false) {
  @include browser('chrome', $version) { @content; };
}

@mixin edge($version:false) {
  @include browser('edge', $version) { @content; };
}

@mixin opera($version:false) {
  @include browser('opera', $version) { @content; };
}

@mixin safari($version:false) {
  @include browser('safari', $version) {  @content; };
}