@import '../../style/themes';
@import '../../style/mixins';

$pre: x-drawer;

.#{$pre} {
  @include reset-component();
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  
  &_wrapper {
    position: absolute;
    right: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    background: $drawer-bg;
    transition: transform .5s cubic-bezier(0.23, 0.85, 0.13, 1);
    pointer-events: all;
  }

  &_header {
    padding: $drawer-padding;
  }
  &_title {
    font-size: $heading-4-size;
  }
  &_body {
    @include reset-scroll(4px);
    flex: 1 1;
    padding: $drawer-padding;
    overflow: overlay;
  }
  &_footer {
    padding: $drawer-padding;
  }

  &_mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    // background: rgba(#000, .4);
    pointer-events: all;
  }

  &-open > &_wrapper {
    border-left: $drawer-border;
    transform: translateX(0);
  }
  &-glass > &_wrapper{
    background: rgba($drawer-bg, .85);
    backdrop-filter: blur(38px);
    box-shadow: 0 0 8px rgba(#000, .2);
  }

}

// 若挂载 body 下，则用 fixed 定位
body > .#{$pre} {
  position: fixed;
}