// stylelint-disable declaration-no-important

// Width and height

@each $prop, $abbrev in (width: w, height: h) {
  @each $size, $length in $sizes {
    %#{$abbrev}-#{$size} { #{$prop}: $length !important; }
  }
}

%mw-100 { max-width: 100% !important; }
%mh-100 { max-height: 100% !important; }

// Viewport additional helpers

%min-vw-100 { min-width: 100vw !important; }
%min-vh-100 { min-height: 100vh !important; }

%vw-100 { width: 100vw !important; }
%vh-100 { height: 100vh !important; }


$x-min-widths: (
    0: 0px,
   16: 16px,
   80: 80px,
  120: 120px,
  280: 280px,
  360: 360px,
  600: 600px
) !default;

$x-max-widths: (
  480: 480px,
  560: 560px,
  600: 600px
) !default;

$x-max-heights: (
  480: 480px,
  560: 560px,
  600: 600px,
  800: 800px
) !default;

@include x-min-widths($x-min-widths);
@include x-max-widths($x-max-widths);
@include x-max-heights($x-max-heights);
.x-w-100vw {
  width: 100vw !important;
}

.x-resize-left,
.x-resize-right {
  @extend %mx-2,
          %position-absolute;

  @include transition(all 300ms ease-in-out);

  width: 0.5rem;

  &::before,
  &::after {
    @extend %position-absolute,
            %bg-light;

    @include border-radius(1rem);
    @include transition(all 300ms ease-in-out);
    content: "";
    width: 0.125rem;
    height: 0.5rem;
  }

  &::before {
    top: calc(50% - .2rem);
  }

  &::after {
    top: calc(50% + .1rem);
  }

  &:hover, &:focus {
    @extend %border-primary;
    &::before,
    &::after {
      @extend %bg-primary;
    }
  }
}

.x-resize-right {
  @extend %border-right;

  right: -0.5rem;

  &::before,
  &::after {
    right: 0.4rem;
  }
}

.x-resize-left {
  @extend %border-left;

  left: -0.5rem;

  &::before,
  &::after {
    left: 0.4rem;
  }
}

.x-resize-handle- {
  &left,
  &right {
    @extend %cursor-pointer;
  }

  &left:hover::before,
  &right:hover::after {
    transform: rotate(40deg);
  }
  &left:hover::after,
  &right:hover::before {
      transform: rotate(-40deg);
  }
}