@import './variables';

#{$prefix}drawer {
  & > #{$prefix}drawer-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background: #000;
    z-index: $z-index-drawer-modal;
  }

  > #{$prefix}drawer-dialog {
    position: fixed;
    @include flex-column();
    top: 0;
    height: 100%;
    background: #fff;
    z-index: $z-index-drawer-dialog;
    box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);

    > #{$prefix}drawer-header {
      @include flex-row();
      padding: 0 10px;
      @include vertical-center(40px);
      border-bottom: 1px solid $border-color1;
      box-sizing: border-box;

      > #{$prefix}drawer-header-icon {
        padding: 0 5px 0 0;
        width: 30px;
        font-size: 1.5rem;
        text-align: center;
        flex-shrink: 0;
      }

      > #{$prefix}drawer-header-title {
        flex-grow: 1;
        font-size: 16px;
        font-weight: 400;
      }

      > #{$prefix}drawer-header-toolbar {
        position: relative;
        flex-shrink: 0;

        #{$prefix}button {
          margin-left: 0;
          padding: 0;
          border: none;
          background-color: transparent;
          cursor: pointer;
          padding: 10px 7px;
          color: $text-color3;
          user-select: none;
          outline: none;
          transition: all 0.2s ease-in-out;
          font-size: 16px;
          width: 30px;
          height: 30px;

          &:hover {
            color: $text-color1;
            transform: scale(1.2);
          }

          #{$prefix}icon {
            transform: scale(1) !important;
          }
        }
      }
    }

    > #{$prefix}drawer-body {
      position: relative;
      padding: 0;
      flex-grow: 1;

      & > #{$prefix}drawer-body-wrapper {
        position: absolute;
        width: 100%;
        height: 100%;

        .el-scrollbar__view {
          padding: 10px;
        }
      }
    }

    > #{$prefix}drawer-footer {
      padding: 0 10px;
      flex-shrink: 0;
      @include vertical-center(50px);
      border-top: 1px solid $border-color1;
      text-align: right;
    }
  }

  &.small {
    #{$prefix}drawer-header {
      @include vertical-center(40px);
    }

    #{$prefix}drawer-footer {
      height: 40px;
      line-height: 37px;
    }
  }

  &.mini {
    #{$prefix}drawer-header {
      @include vertical-center(35px);
    }

    #{$prefix}drawer-footer {
      height: 35px;
      line-height: 32px;
    }
  }

  &.left {
    #{$prefix}drawer-dialog {
      left: 0;
    }
  }

  &.right {
    #{$prefix}drawer-dialog {
      right: 0;
    }
  }

  &.fullscreen {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: $z-index-box-fullscreen;

    > #{$prefix}drawer-dialog {
      width: 100% !important;

      > #{$prefix}drawer-drag {
        display: none;
      }
    }
  }

  &.draggable {
    #{$prefix}drawer-header-title {
      user-select: none;
    }
  }

  &.no-padding {
    .el-scrollbar__view {
      padding: 0 !important;
    }
  }

  &-drag {
    position: absolute;
    top: 0;
    height: 100%;
    width: 0;

    &-left {
      right: 0;
    }

    &-move-trigger {
      position: absolute;
      top: 50%;
      width: 8px;
      height: 100px;
      line-height: 100px;
      background: rgb(243, 243, 243);
      transform: translate(-50%, -50%);
      border-radius: 4px;
      box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
      cursor: col-resize;

      &-point {
        display: inline-block;
        width: 50%;
        transform: translateX(50%);

        i {
          display: block;
          border-bottom: 1px solid rgb(192, 192, 192);
          padding-bottom: 2px;
        }
      }
    }
  }
}