@import "../core/index-noreset.scss";
@import './scss/variable.scss';

body#{$modal-prefix}-open {
  overflow: hidden;
}

#{$modal-prefix} {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 1001;
  background: $background-overlay;
  &-header {
    position: relative;
    z-index: 1;
    // 添加这两句是提高层级，否则阴影被覆盖
    height: $modal-header-height;
    box-shadow: $shadow-01;
    display: flex;
    box-sizing: border-box;
    padding: $S8 $S16;
    align-items: center;
    justify-content: space-between;
    .left-part {
      #{$modal-prefix}-title {
        font-size: $font-size-body;
        line-height: $line-height-body;
        color: $gray-08;
        #{$modal-prefix}-edit-icon {
          margin-left: $S4;
          vertical-align: middle;
        }
        .edit-title {
          display: inline-block;
          vertical-align: middle;
        }
      }
      #{$modal-prefix}-description {
        font-size: $font-size-body;
        line-height: $line-height-body;
        color: $gray-06;
      }
    }
    .right-part {
      display: flex;
      justify-content: flex-end;
      #{$modal-prefix}-side-drawer-switch {
        box-sizing: border-box;
        height: $S32;
        margin: 2px $S12;
        border-radius: $shape-radius;
        border: 1px solid $gray-03;
        padding: 5px $S12;
        font-size: $font-size-body;
        line-height: $line-height-body;
        color: $gray-07;
        &-label {
          vertical-align: middle;
          display: inline-block;
        }
        .#{$css-prefix}switch {
          margin: 2px 0 2px $S8;
          vertical-align: middle;
        }
      }
      #{$modal-prefix}-close {
        height: $S24;
        margin: 6px 0;
      }
    }
  }
  &-body {
    height: calc(100% - #{$modal-header-height});
    overflow: hidden;
    display: flex;
    #{$modal-prefix}-children, #{$modal-prefix}-side-drawer {
      height: 100%;
      overflow: auto;
    }
    #{$modal-prefix}-children {
      flex: 1;
      background: $background-layout;
    }
    #{$modal-prefix}-side-drawer {
      background: $background-overlay;
      overflow: hidden;
      transition: width 0.3s ease-out;
      &#{$modal-prefix}-side-drawer-visible {
        box-shadow: -1px 0 0 0 $gray-03;
        overflow: auto;
      }
    }
  }
}