$writing-mode-prefix: "writing-mode-";
$writing-mode-horizontal: "#{$writing-mode-prefix}h";
$writing-mode-vertical: "#{$writing-mode-prefix}v";
$writing-mode-sideways: "#{$writing-mode-prefix}s";

.#{$writing-mode-horizontal}tb { writing-mode: horizontal-tb; }
.#{$writing-mode-vertical}rl { writing-mode: vertical-rl; }
.#{$writing-mode-vertical}lr { writing-mode: vertical-lr; }

$resize-translate: ("block": ("vertical", "horizontal"), "inline": ("horizontal", "vertical"));
$axis-translate: ("block": ("y", "x"), "inline": ("x", "y"));

@mixin resize($value) {
  resize: $value;

  @if map-has-key($resize-translate, $value) {
    @supports not (resize: $value) {
      resize: nth(map-get($resize-translate, $value), 1);
      [class^=#{$writing-mode-prefix}]:not([class^=#{$writing-mode-horizontal}]) &,
      &[class^=#{$writing-mode-prefix}]:not([class^=#{$writing-mode-horizontal}]) {
        resize: nth(map-get($resize-translate, $value), 2);
      }
    }
  }
}

@mixin xy($prop, $axis, $value) {
  #{$prop}-#{$axis}: $value;

  @if map-has-key($axis-translate, $axis) {
    @supports not (#{$prop}-#{$axis}: $value) {
      #{$prop}-#{nth(map-get($axis-translate, $axis), 1)}: $value;
      [class^=#{$writing-mode-prefix}]:not([class^=#{$writing-mode-horizontal}]) &,
      &[class^=#{$writing-mode-prefix}]:not([class^=#{$writing-mode-horizontal}]) {
        #{$prop}-#{nth(map-get($axis-translate, $axis), 2)}: $value;
      }
    }
  }
}

@mixin overflow-block($value) { @include xy("overflow", "block", $value); }
@mixin overflow-inline($value) { @include xy("overflow", "inline", $value); }
@mixin overscroll-behavior-block($value) { @include xy("overscroll-behavior", "block", $value); }
@mixin overscroll-behavior-inline($value) { @include xy("overscroll-behavior", "inline", $value); }
