// @import "ivue-button";
// @import "ivue-spin";

$name: 'ivue-modal';

:root {
  // header
  --#{$name}-header-padding: 14px 30px 14px 16px;
  --#{$name}-header-content-font-size: 16px;

  // body
  --#{$name}-body-padding: 16px;
  --#{$name}-body-font-size: 14px;

  // 底部
  --#{$name}-footer-padding: 12px 18px;
  --#{$name}-footer-button-margin: 12px;

  // close
  --#{$name}-close-position: 5px;

  // spin
  --#{$name}-spin-radius: 8px;

  // instance
  --#{$name}-instance-head-padding: 0 12px 0 0;
  --#{$name}-instance-head-title-margin: 12px;
  --#{$name}-instance-icon-font-size: 28px;
  --#{$name}-instance-body-margin-top: 10px;
  --#{$name}-instance-body-padding-left: 40px;
  --#{$name}-instance-body-font-size: 14px;
  --#{$name}-instance-footer-margin-top: 20px;

  // media
  --#{$name}-media-margin: 10px;

  // color
  --#{$name}-content-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  --#{$name}-mask-color: rgba(55, 55, 55, 0.6);
}

.#{$name} {
  position: relative;
  top: 0;
  width: auto;
  margin: 0 auto;
  outline: 0;

  // 蒙版
  &-mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--#{$name}-mask-color);
    height: 100%;
    z-index: 1000;
  }

  // 弹窗外层
  &-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    outline: 0;
    overflow: auto;
  }

  &-wrapper * {
    box-sizing: border-box;
  }

  // 隐藏
  &-hidden {
    display: none;
  }

  // 没有蒙版
  &-no-mask {
    pointer-events: none;
  }

  // 拖动蒙版
  &-drag-mask {
    overflow: hidden;
    width: 100%;
    height: 100%;
  }

  // 内容
  &-content {
    position: relative;
    background-color: var(--ivue-white-color);
    border: 0;
    border-radius: 8px;
    box-shadow: var(--#{$name}-content-shadow);

    &--no-mask {
      pointer-events: auto;
    }

    // 拖动
    &--drag {
      position: absolute;

      .#{$name}-header {
        cursor: move;
      }
    }

    // 拖动中
    &--dragging {
      user-select: none;
    }
  }

  // 头部
  &-header {
    border-bottom: 1px solid var(--ivue-border-color);
    padding: var(--#{$name}-header-padding);
    line-height: 1;

    // 内容
    &--content {
      display: inline-block;
      width: 100%;
      font-size: var(--#{$name}-header-content-font-size);
      color: var(--ivue-title-color);
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  // 内容
  &-body {
    padding: var(--#{$name}-body-padding);
    font-size: var(--#{$name}-body-font-size);
  }

  // 底部
  &-footer {
    border-top: 1px solid var(--ivue-border-color);
    padding: var(--#{$name}-footer-padding);
    text-align: right;
  }

  // 底部按钮
  &-footer--button {
    margin-right: var(--#{$name}-footer-button-margin);

    &:last-child {
      margin-left: var(--#{$name}-footer-button-margin);
      margin-right: 0;
    }
  }

  // 关闭按钮
  &-close {
    position: absolute;
    top: var(--#{$name}-close-position);
    right: var(--#{$name}-close-position);
    cursor: pointer;
  }

  // 加载中
  .#{$name}-spin {
    border-radius: var(--#{$name}-spin-radius);
  }

  // 居中
  &-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  // 全屏
  &-fullscreen {
    width: 100% !important;
    top: 0;
    bottom: 0;
    position: absolute;

    // 弹窗内容
    .#{$name}-content {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      border-radius: 0;
      display: flex;
      flex-direction: column;
    }

    // 内容
    .#{$name}-body {
      flex: 1;
      overflow: auto;
    }
  }

  // 实例渲染
  &-instance {
    // 头部
    &--head {
      padding: var(--#{$name}-instance-head-padding);
      display: flex;
      align-items: center;

      &__title {
        margin-left: var(--#{$name}-instance-head-title-margin);
        font-size: var(--#{$name}-header-content-font-size);
        color: var(--ivue-title-color);
        font-weight: bold;
      }

      &__icon {
        width: auto;
        height: auto;
        margin: 0;
        font-size: var(--#{$name}-instance-icon-font-size);
      }

      &__success {
        color: var(--ivue-success-color);
        display: inline-block;
      }

      &__info {
        color: var(--ivue-primary-color);
      }

      &__warning {
        color: var(--ivue-warning-color);
      }

      &__error {
        color: var(--ivue-error-color);
      }

      &__confirm {
        color: var(--ivue-warning-color);
      }
    }

    // body
    &--body {
      position: relative;
      margin-top: var(--#{$name}-instance-body-margin-top);
      padding-left: var(--#{$name}-instance-body-padding-left);
      font-size: var(--#{$name}-instance-body-font-size);
      color: var(--ivue-text-color);

      &__render {
        padding: 0;
        margin: 0;
      }
    }

    // 底部
    &--footer {
      margin-top: var(--#{$name}-instance-footer-margin-top);
      text-align: right;
    }
  }
}

// media
@media (max-width: 576px) {
  .#{$name} {
    width: auto !important;
    margin: var(--#{$name}-media-margin);

    &-fullscreen {
      width: 100% !important;
      margin: 0;
    }

    &-drag-mask {
      margin: 0;
    }
  }
}