@import './../theme/vars.scss';
@import './../mixins/index.scss';

$drawerPrefixCls: #{$vender-prefix}-drawer;
$drawer-size: 300px;
$drawer-container-bg: #ececec;
$drawer-container-header: #ccc;

.#{$drawerPrefixCls} {
  @include reset-component2;

  &-header {
    display: flex;
    min-height: 3em;
    background: $drawer-container-header;
    align-items: center;
  }

  &-content {
    min-height: 5em;
    padding: 1em;
    border-top: 1px solid #ccc;
  }

  &-title {
    padding-left: 0.8em;
    font-size: 16px;
    flex: 1;
    font-weight: bold;
    text-align: left;
  }

  &-close {
    padding-right: 1em;

    i {
      cursor: pointer;

      &:hover {
        color: $danger-color;
      }
    }
  }

  &-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: $zindex-drawer-overlay;
    width: 100%;
    height: 100%;
    background: rgba(black, 0.3);
    animation-duration: 0.2s;
  }

  .hidden {
    display: none;
  }

  &-bar {
    position: fixed;
    z-index: $zindex-drawer;
    color: white;
    text-align: center;
    cursor: pointer;
    background-color: rgba(black, 0.5);
    box-shadow: 2px 2px 5px rgba(#2b1636, 0.2);

    &:hover {
      background-color: rgba(black, 0.7);
    }

    &.#{$drawerPrefixCls}-bar-left {
      top: calc(50% - 50px);
      left: 0;
      width: 1.8em;
      height: 8em;
      line-height: 8em;
      border-radius: 0 12px 12px 0;
    }

    &.#{$drawerPrefixCls}-bar-top {
      top: 0;
      left: calc(50% - 50px);
      width: 8em;
      height: 1.8em;
      line-height: 1.8em;
      border-radius: 0 0 12px 12px;
    }

    &.#{$drawerPrefixCls}-bar-bottom {
      bottom: 0;
      left: calc(50% - 50px);
      width: 8em;
      height: 1.8em;
      line-height: 1.8em;
      border-radius: 12px 12px 0 0;
    }

    &.#{$drawerPrefixCls}-bar-right {
      top: calc(50% - 50px);
      right: 0;
      width: 1.8em;
      height: 8em;
      line-height: 8em;
      border-radius: 12px 0 0 12px;
    }
  }
}

.#{$drawerPrefixCls}-contanier {
  position: fixed;
  z-index: $zindex-drawer;
  background-color: $drawer-container-bg;
  box-shadow: -5px 0 5px -5px rgba(black, 0.55);
  animation-duration: $animation-duration-base;

  &.#{$drawerPrefixCls}-top {
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: $drawer-size;
  }

  &.#{$drawerPrefixCls}-bottom {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: $drawer-size;
  }

  &.#{$drawerPrefixCls}-left {
    top: 0;
    left: 0;
    width: $drawer-size;
    height: 100%;
  }

  &.#{$drawerPrefixCls}-right {
    top: 0;
    right: 0;
    width: $drawer-size;
    height: 100%;
  }
}

.#{$drawerPrefixCls}-global-opened {
  overflow-y: hidden;
}