@use 'ej2-base/styles/common/mixin' as *;
@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: $sidebar-height;
    overflow: auto;
    position: fixed;
    top: 0;
    transition: none;
    vertical-align: middle;
    visibility: hidden;
    will-change: transform;

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

    &.e-right.e-close,
    &.e-left.e-close {
      box-shadow: none;
      visibility: hidden;
    }

    &.e-right.e-close {
      transform: translateX(100%);
    }

    &.e-left.e-close {
      transform: translateX(-100%);
    }

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

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

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

    &.e-left.e-close.e-dock,
    &.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-sidebarcontainer {
    > .e-sidebar {
      &.e-over,
      &.e-auto,
      &.e-push,
      &.e-slide + div {
        transition: margin .5s ease, transform .5s ease;
      }
    }

    > .e-sidebar.e-left.e-open.e-auto + div {
      margin-right: $sidebar-margin-none;
      transform: translateX(0);
      margin-left: var(--sidebar-width);
    }

    > .e-sidebar.e-left.e-close.e-auto + div {
      margin-right: $sidebar-margin-none;
      transform: translateX(0);
      margin-left: $sidebar-margin-none;
    }

    > .e-sidebar.e-right.e-open.e-auto + div {
      margin-left: $sidebar-margin-none;
      transform: translateX(0);
      margin-right: var(--sidebar-width);
    }

    > .e-sidebar.e-right.e-close.e-auto + div {
      margin-right: $sidebar-margin-none;
      transform: translateX(0);
      margin-left: $sidebar-margin-none;
    }

    > .e-sidebar.e-left.e-open.e-push + div {
      margin-right: $sidebar-margin-none;
      transform: translateX(0);
      margin-left: var(--sidebar-width);
    }

    > .e-sidebar.e-left.e-close.e-push + div {
      margin-right: $sidebar-margin-none;
      transform: translateX(0);
      margin-left: $sidebar-margin-none;
    }

    > .e-sidebar.e-right.e-open.e-push + div {
      margin-left: $sidebar-margin-none;
      transform: translateX(0);
      margin-right: var(--sidebar-width);
    }

    > .e-sidebar.e-right.e-close.e-push + div {
      margin-right: $sidebar-margin-none;
      transform: translateX(0);
      margin-left: $sidebar-margin-none;
    }

    > .e-sidebar.e-left.e-open.e-slide + div {
      margin-left: $sidebar-margin-none;
      transform: translate(var(--sidebar-width));
    }

    > .e-sidebar.e-left.e-close.e-slide + div {
      margin-left: $sidebar-margin-none;
      transform: translate(0);
    }

    > .e-sidebar.e-right.e-open.e-slide + div {
      margin-right: $sidebar-margin-none;
      margin-left: $sidebar-margin-none;
      transform: translate(calc(-1 * var(--sidebar-width)));
    }

    > .e-sidebar.e-right.e-close.e-slide + div {
      margin-right: $sidebar-margin-none;
      margin-left: $sidebar-margin-none;
      transform: translate(0);
    }
  }

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

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

  .e-backdrop,
  .e-sidebar-overlay {
    background-color: $sidebar-overlay;
    height: $sidebar-height;
    left: 0;
    pointer-events: auto;
    top: 0;
    z-index: 999;
  }

  .e-backdrop {
    @if ($skin-name != 'tailwind' and $skin-name != 'tailwind3' and  $skin-name != 'bootstrap5' and  $skin-name != 'FluentUI' and $skin-name != 'Material3') {
      opacity: .5;
    }
    @if ($skin-name == 'fluent2') {
      filter: $sidebar-overlay-filter;
      opacity: $sidebar-overlay-opacity;
    }
    width: auto;
  }

  .e-sidebar-overlay {
    @if ($skin-name != 'tailwind' and  $skin-name != 'bootstrap5' and  $skin-name != 'FluentUI') {
      opacity: .5;
    }
    @if ($skin-name == 'fluent2') {
      backdrop-filter: $sidebar-overlay-filter;
    }
    position: fixed;
    width: 100%;
  }

  .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;
  }

  .e-sidebar-overflow {
    overflow-x: hidden;
  }

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