// Mixins to allow creation of additional custom drawer sizes when using the defaults at the same time

@mixin uex-layout-sidebar-out($size) {
  @each $side in (left, right) {
    .uex-layout-sidebar-wrapper-#{$side} {

      > .uex-layout-sidebar.uex-layout-sidebar-#{$side} {
        // position
        top: 0;
        #{$side}: 0;

        width: $size;
        height: 100%;

        @if $side == left {
          transform: translateX(
            -$size - 10px
          ); // initial position of drawer (closed), way off screen
        } @else {
          transform: translateX(
            $size + 10px
          ); // initial position of drawer (closed), way off screen
        }
      }

      > .uex-layout-header,
      > .uex-layout-content {
        margin-#{$side}: 0;
      }
    }

  }
}

@mixin uex-layout-sidebar-in($size, $side) {
  &.uex-layout-sidebar-wrapper-#{$side} {
    // Push - drawer will push the header and content (default behavior)
    > .uex-layout-header {
      width: calc(100% - #{$size});
      margin-#{$side}: $size;
    }

    > .uex-layout-sidebar.uex-layout-sidebar-#{$side} {
      transform: translateX(0);
    }

    > .uex-layout-content {
      margin-#{$side}: $size;
    }
  }
}

// breakpoint based open to a particular size
@mixin uex-layout-sidebar-in-up($size) {
  @each $side in (left, right) {
    .uex-layout-sidebar-in-#{$side} {
      @include uex-layout-sidebar-in($size, $side);
    }
  }

  .uex-layout-sidebar-in-left.uex-layout-sidebar-in-right:not(.uex-layout-sidebar-overlay) {
    > .uex-layout-header {
      width: calc(100% - #{$size * 2});
    }
  }
}

@mixin uex-layout-sidebar-overlay {
  @include uex-layout-backdrop-in();

  @each $side in (left, right) {
    &.uex-layout-sidebar-in-#{$side} {
      > .uex-layout-header,
      > .uex-layout-content {
        width: 100%;
        margin-#{$side}: 0;
      }
    }
  }
}

// Overlay - left/right responsive overlay classes and marker class
@mixin uex-layout-sidebar-overlay-down {
  // e.g. &, &-sm, &-md, &-lg
  .uex-layout-sidebar-overlay {
    @include uex-layout-sidebar-overlay;
  }
}