@import '../style/theme/color';
@import '../style/theme/shadow';
@import '../style/theme/corner';
@import '../style/theme/z-index';

.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: $devui-z-index-drawer;
}

.overlay-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
}

.display-width {
  left: 0;
  right: 0;
}

.overlay-backdrop {
  position: absolute;
  top: 0;
  bottom: 0 !important;
  background: $devui-feedback-overlay-backdrop;
}

.drawer-nav,
.drawer-content {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: $devui-border-radius;
}

.drawer-nav {
  background: $devui-base-bg;
}

.drawer-content {
  left: 0;
  right: 0;
  box-shadow: $devui-shadow-length-fullscreen-overlay $devui-shadow;
  overflow: auto;

  &::-webkit-scrollbar-thumb {
    background-color: transparent;
  }

  &:hover {
    &::-webkit-scrollbar-thumb {
      background-color: $devui-line;
    }

    &::-webkit-scrollbar-thumb:hover {
      background-color: $devui-placeholder;
    }
  }
}

.devui-drawer-resize-bar {
  position: absolute;
  top: 0;
  height: 100%;
  width: 4px;
  z-index: 10;
  border-left: 1px solid $devui-dividing-line;

  &.devui-drawer-resize-bar-left {
    right: -1px;
  }

  &.devui-drawer-resize-bar-right {
    left: -1px;
  }

  &.devui-drawer-can-hover:hover {
    border-left-color: $devui-brand-hover;
    border-left-width: 2px;
    cursor: col-resize;
  }
}
