@include export-module('sidebar-theme') {

  ejs-sidebar {
    display: none;
  }

  .e-sidebar-display {
    display: block;
  }

  .e-sidebar {
    /* stylelint-disable property-no-vendor-prefix */
    -webkit-tap-highlight-color: transparent;
    background: $sidebar-background;
    height: 100%;
    overflow: auto;
    position: fixed;
    top: 0;
    transition: none;
    vertical-align: middle;
    visibility: hidden;
    will-change: transform;

    &.e-right.e-open {
      transform: translateX(0%);
      transition: transform .5s ease;
      visibility: visible;
    }

    &.e-right.e-close {
      box-shadow: none;
      transform: translateX(100%);
      transition: transform .5s ease, visibility 500ms;
      visibility: hidden;
    }

    &.e-left.e-open {
      transform: translateX(0%);
      transition: transform .5s ease;
      visibility: visible;
    }

    &.e-left.e-transition.e-close,
    &.e-right.e-transition.e-close {
      transition: transform .5s ease, visibility 500ms;
    }

    &.e-left.e-close {
      box-shadow: none;
      transform: translateX(-100%);
      visibility: hidden;
    }

    &.e-right.e-close {
      box-shadow: none;
      transform: translateX(100%);
      transition: transform .5s ease, visibility 500ms;
      visibility: hidden;
    }

    &.e-right {
      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
        border-left: 0 solid $sidebar-border;
      }
      @else {
        border-left: 1px solid $sidebar-border;
      }
      left: auto;
      right: 0;
      top: 0;
    }

    &.e-left {
      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
        border-right: 0 solid $sidebar-border;
      }
      @else {
        border-right: 1px solid $sidebar-border;
      }
      left: 0;
      right: auto;
      top: 0;
    }

    &.e-left.e-close.e-dock {
      transform: translateX(0%);
      transition: width .5s ease, visibility 500ms;
      visibility: visible;
    }

    &.e-right.e-close.e-dock {
      transform: translateX(0%);
      transition: width .5s ease, visibility 500ms;
      visibility: visible;
    }

    &.e-left.e-open.e-dock.e-blazor-dock,
    &.e-right.e-open.e-dock.e-blazor-dock {
      transition: width .5s ease, visibility 500ms;
    }

    &.e-left.e-open.e-disable-animation,
    &.e-right.e-open.e-disable-animation,
    &.e-right.e-close.e-disable-animation,
    &.e-left.e-close.e-disable-animation {
      transition: none;
    }

    &.e-visibility {
      visibility: hidden;
    }

    &.e-over {
      box-shadow: $sidebar-box-shadow;
    }
  }

  .e-sidebar-absolute {
    position: absolute;
  }

  .e-sidebar-context {
    overflow-x: hidden;
    position: relative;
  }

  .e-backdrop {
    background-color: $sidebar-overlay;
    height: 100%;
    left: 0;
    @if ($skin-name != 'tailwind' and  $skin-name != 'bootstrap5' and  $skin-name != 'FluentUI') {
      opacity: .5;
    }
    pointer-events: auto;
    top: 0;
    width: auto;
    z-index: 999;
  }

  .e-content-animation {
    transition: margin .5s ease, -webkit-transform .5s ease, transform .5s ease;

    &.e-overlay {
      box-sizing: border-box;
      overflow: auto;
      user-select: none;
    }
  }

  .e-disable-interaction {
    pointer-events: none;
    touch-action: none;
  }

  /* stylelint-disable */
  .e-sidebar-overflow {
        overflow-x: hidden !important;
    }
  /* stylelint-enable */

  .e-sidebar-overlay {
    background-color: $sidebar-overlay;
    height: 100%;
    left: 0;
    @if ($skin-name != 'tailwind' and  $skin-name != 'bootstrap5' and  $skin-name != 'FluentUI') {
      opacity: .5;
    }
    pointer-events: auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
  }

  .e-content-placeholder.e-sidebar.e-placeholder-sidebar {
    left: 0;
    position: fixed;
    right: auto;
    top: 0;
    visibility: visible;
  }
}
