$name: 'ivue-popover';

:root {
  // popper
  --#{$name}-popper-font-size: 14px;
  --#{$name}-popper-min-width: 150px;

  // top
  --#{$name}-top-padding: 5px 0 8px;
  --#{$name}-top-arrow-left: 50%;
  --#{$name}-top-arrow-margin-left: -5px;
  --#{$name}-top-arrow-bottom: 3px;
  --#{$name}-top-arrow-border-width: 5px 5px 0;

  // top-start
  --#{$name}-top-start-padding: 5px 0 8px;
  --#{$name}-top-start-arrow-left: 16px;
  --#{$name}-top-start-arrow-bottom: 3px;
  --#{$name}-top-start-arrow-border-width: 5px 5px 0;

  // top-end
  --#{$name}-top-end-padding: 5px 0 8px;
  --#{$name}-top-end-arrow-right: 16px;
  --#{$name}-top-end-arrow-bottom: 3px;
  --#{$name}-top-end-arrow-border-width: 5px 5px 0;

  // left-start
  --#{$name}-left-start-padding: 0 8px 0 5px;
  --#{$name}-left-start-arrow-top: 8px;
  --#{$name}-left-start-arrow-right: 3px;
  --#{$name}-left-start-arrow-border-width: 5px 0 5px 5px;

  // left
  --#{$name}-left-padding: 0 8px 0 5px;
  --#{$name}-left-arrow-top: 50%;
  --#{$name}-left-arrow-margin-top: -5px;
  --#{$name}-left-arrow-right: 3px;
  --#{$name}-left-arrow-border-width: 5px 0 5px 5px;

  // left-end
  --#{$name}-left-end-padding: 0 8px 0 5px;
  --#{$name}-left-end-arrow-bottom: 8px;
  --#{$name}-left-end-arrow-right: 3px;
  --#{$name}-left-end-arrow-border-width: 5px 0 5px 5px;

  // right-start
  --#{$name}-right-start-padding: 0 5px 0 8px;
  --#{$name}-right-start-arrow-top: 8px;
  --#{$name}-right-start-arrow-left: 3px;
  --#{$name}-right-start-arrow-border-width: 5px 5px 5px 0;

  // right
  --#{$name}-right-padding: 0 5px 0 8px;
  --#{$name}-right-arrow-top: 50%;
  --#{$name}-right-arrow-margin-top: -5px;
  --#{$name}-right-arrow-left: 3px;
  --#{$name}-right-arrow-border-width: 5px 5px 5px 0;

  // right-end
  --#{$name}-right-end-padding: 0 5px 0 8px;
  --#{$name}-right-end-arrow-bottom: 8px;
  --#{$name}-right-end-arrow-left: 3px;
  --#{$name}-right-end-arrow-border-width: 5px 5px 5px 0;

  // bottom-start
  --#{$name}-bottom-start-padding: 8px 0 5px;
  --#{$name}-bottom-start-arrow-left: 16px;
  --#{$name}-bottom-start-arrow-top: 3px;
  --#{$name}-bottom-start-arrow-border-width: 0 5px 5px;

  // bottom
  --#{$name}-bottom-padding: 8px 0 5px;
  --#{$name}-bottom-arrow-left: 50%;
  --#{$name}-bottom-arrow-margin-left: -5px;
  --#{$name}-bottom-arrow-top: 3px;
  --#{$name}-bottom-arrow-border-width: 0 5px 5px;

  // bottom-end
  --#{$name}-bottom-end-padding: 8px 0 5px;
  --#{$name}-bottom-end-arrow-right: 16px;
  --#{$name}-bottom-end-arrow-top: 3px;
  --#{$name}-bottom-end-arrow-border-width: 0 5px 5px;

  // inner
  --#{$name}-inner-max-width: 250px;
  --#{$name}-inner-min-height: 34px;
  --#{$name}-inner-padding: 8px 12px;
  --#{$name}-inner-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);

  // title
  --#{$name}-title-margin-bottom: 8px;

  // body
  --#{$name}-body-message-margin-left: 5px;
  --#{$name}-body-icon-font-size: 16px;

  // footer
  --#{$name}-footer-margin-top: 24px;
  --#{$name}-footer-button-margin-right: 8px;
  --#{$name}-footer-button-height: 26px;
  --#{$name}-footer-button-padding: 0 7px;
  --#{$name}-footer-button-last-margin-left: 8px;

  // light

  // top
  --#{$name}-light-top-after-left: 50%;
  --#{$name}-light-top-after-margin-left: -7px;
  --#{$name}-light-top-after-border-width: 7px 7px 0;

  // top-start
  --#{$name}-light-top-start-after-left: -7px;
  --#{$name}-light-top-start-after-border-width: 7px 7px 0;

  // top-end
  --#{$name}-light-top-end-after-right: -7px;
  --#{$name}-light-top-end-after-border-width: 7px 7px 0;

  // left-start
  --#{$name}-light-left-start-after-top: -7px;
  --#{$name}-light-left-start-after-border-width: 7px 0 7px 7px;

  // left
  --#{$name}-light-left-after-top: 50%;
  --#{$name}-light-left-after-margin-top: -7px;
  --#{$name}-light-left-after-border-width: 7px 0 7px 7px;

  // left-end
  --#{$name}-light-left-end-after-bottom: -7px;
  --#{$name}-light-left-end-after-border-width: 7px 0 7px 7px;

  // right-start
  --#{$name}-light-right-start-after-top: -7px;
  --#{$name}-light-right-start-after-border-width: 7px 7px 7px 0;

  // right
  --#{$name}-light-right-after-top: 50%;
  --#{$name}-light-right-after-margin-top: -7px;
  --#{$name}-light-right-after-border-width: 7px 7px 7px 0;

  // right-end
  --#{$name}-light-right-end-after-bottom: -7px;
  --#{$name}-light-right-end-after-border-width: 7px 7px 7px 0;

  // bottom-start
  --#{$name}-light-bottom-start-after-left: -7px;
  --#{$name}-light-bottom-start-after-border-width: 0 7px 7px;

  // bottom
  --#{$name}-light-bottom-after-left: 50%;
  --#{$name}-light-bottom-after-margin-left: -7px;
  --#{$name}-light-bottom-after-border-width: 0 7px 7px;

  // bottom-end
  --#{$name}-light-bottom-end-after-right: -7px;
  --#{$name}-light-bottom-end-after-border-width: 0 7px 7px;

  // color
  --#{$name}-popper-bg: rgba(56, 61, 71, 0.9);
  --#{$name}-light-border-color: rgba(56, 61, 71, 0.5);
}

.#{$name} {
  display: inline-block;

  // 描述
  &-rel {
    position: relative;
    display: inline-block;
  }

  // 悬浮框
  &-popper {
    display: block;
    visibility: visible;
    font-size: var(--#{$name}-popper-font-size);
    line-height: initial;
    min-width: var(--#{$name}-popper-min-width);
    z-index: 1060;

    // top
    &[data-popper-placement='top'] {
      padding: var(--#{$name}-top-padding);

      .#{$name}-arrow {
        left: var(--#{$name}-top-arrow-left);
        margin-left: var(--#{$name}-top-arrow-margin-left);
        bottom: var(--#{$name}-top-arrow-bottom);
        border-width: var(--#{$name}-top-arrow-border-width);
        border-top-color: var(--#{$name}-popper-bg);
      }
    }

    // top-start
    &[data-popper-placement='top-start'] {
      padding: var(--#{$name}-top-start-padding);

      .#{$name}-arrow {
        left: var(--#{$name}-top-start-arrow-left);
        bottom: var(--#{$name}-top-start-arrow-bottom);
        border-width: var(--#{$name}-top-start-arrow-border-width);
        border-top-color: var(--#{$name}-popper-bg);
      }
    }

    // top-end
    &[data-popper-placement='top-end'] {
      padding: var(--#{$name}-top-end-padding);

      .#{$name}-arrow {
        right: var(--#{$name}-top-end-arrow-right);
        bottom: var(--#{$name}-top-end-arrow-bottom);
        border-width: var(--#{$name}-top-end-arrow-border-width);
        border-top-color: var(--#{$name}-popper-bg);
      }
    }

    // left-start
    &[data-popper-placement='left-start'] {
      padding: var(--#{$name}-left-start-padding);

      .#{$name}-arrow {
        top: var(--#{$name}-left-start-arrow-top);
        right: var(--#{$name}-left-start-arrow-right);
        border-width: var(--#{$name}-left-start-arrow-border-width);
        border-left-color: var(--#{$name}-popper-bg);
      }
    }

    // left
    &[data-popper-placement='left'] {
      padding: var(--#{$name}-left-padding);

      .#{$name}-arrow {
        top: var(--#{$name}-left-arrow-top);
        margin-top: var(--#{$name}-left-arrow-margin-top);
        right: var(--#{$name}-left-arrow-right);
        border-width: var(--#{$name}-left-arrow-border-width);
        border-left-color: var(--#{$name}-popper-bg);
      }
    }

    // left-end
    &[data-popper-placement='left-end'] {
      padding: var(--#{$name}-left-end-padding);

      .#{$name}-arrow {
        bottom: var(--#{$name}-left-end-arrow-bottom);
        right: var(--#{$name}-left-end-arrow-right);
        border-width: var(--#{$name}-left-end-arrow-border-width);
        border-left-color: var(--#{$name}-popper-bg);
      }
    }

    // right-start
    &[data-popper-placement='right-start'] {
      padding: var(--#{$name}-right-start-padding);

      .#{$name}-arrow {
        top: var(--#{$name}-right-start-arrow-to);
        left: var(--#{$name}-right-start-arrow-left);
        border-width: var(--#{$name}-right-start-arrow-border-width);
        border-right-color: var(--#{$name}-popper-bg);
      }
    }

    // right
    &[data-popper-placement='right'] {
      padding: var(--#{$name}-right-padding);

      .#{$name}-arrow {
        top: var(--#{$name}-right-arrow-top);
        margin-top: var(--#{$name}-right-arrow-margin-top);
        left: var(--#{$name}-right-arrow-left);
        border-width: var(--#{$name}-right-arrow-border-width);
        border-right-color: var(--#{$name}-popper-bg);
      }
    }

    // right-end
    &[data-popper-placement='right-end'] {
      padding: var(--#{$name}-right-end-padding);

      .#{$name}-arrow {
        bottom: var(--#{$name}-right-end-arrow-bottom);
        left: var(--#{$name}-right-end-arrow-left);
        border-width: var(--#{$name}-right-end-arrow-border-width);
        border-right-color: var(--#{$name}-popper-bg);
      }
    }

    // bottom-start
    &[data-popper-placement='bottom-start'] {
      padding: var(--#{$name}-bottom-start-padding);

      .#{$name}-arrow {
        left: var(--#{$name}-bottom-start-arrow-left);
        top: var(--#{$name}-bottom-start-arrow-top);
        border-width: var(--#{$name}-bottom-start-arrow-border-width);
        border-bottom-color: var(--#{$name}-popper-bg);
      }
    }

    // bottom
    &[data-popper-placement='bottom'] {
      padding: var(--#{$name}-bottom-padding);

      .#{$name}-arrow {
        left: var(--#{$name}-bottom-arrow-left);
        margin-left: var(--#{$name}-bottom-arrow-margin-left);
        top: var(--#{$name}-bottom-arrow-top);
        border-width: var(--#{$name}-bottom-arrow-border-width);
        border-bottom-color: var(--#{$name}-popper-bg);
      }
    }

    // bottom-end
    &[data-popper-placement='bottom-end'] {
      padding: var(--#{$name}-bottom-end-padding);

      .#{$name}-arrow {
        right: var(--#{$name}-bottom-end-arrow-right);
        top: var(--#{$name}-bottom-end-arrow-top);
        border-width: var(--#{$name}-bottom-end-arrow-border-width);
        border-bottom-color: var(--#{$name}-popper-bg);
      }
    }
  }

  // inner
  &-inner {
    max-width: var(--#{$name}-inner-max-width);
    min-height: var(--#{$name}-inner-min-height);
    padding: var(--#{$name}-inner-padding);
    color: var(--ivue-white-color);
    text-align: left;
    text-decoration: none;
    background-color: var(--#{$name}-popper-bg);
    border-radius: var(--ivue-border-radius);
    box-shadow: var(--#{$name}-inner-shadow);
    white-space: nowrap;
    overflow: hidden;
  }

  // arrow
  &-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
  }

  // title
  &-title {
    margin-bottom: var(--#{$name}-title-margin-bottom);
    padding-bottom: var(--#{$name}-title-margin-bottom);
    position: relative;
    font-weight: bold;
    border-bottom: 1px solid var(--ivue-white-color);
  }

  // 对话框
  &-confirm &-inner {
    white-space: normal;
  }

  &-confirm &-body {
    display: flex;
    align-items: flex-start;
  }

  // body
  &-body {
    &--word-wrap {
      white-space: pre-wrap;
      text-align: justify;
    }

    // message
    &--message {
      margin-left: var(--#{$name}-body-message-margin-left);
      line-height: var(--#{$name}-body-icon-font-size);
    }

    .#{$name}-body--icon {
      font-size: var(--#{$name}-body-icon-font-size);
      color: var(--ivue-warning-color);
      width: auto;
      height: auto;
      min-width: auto;
      margin: 0;
    }
  }

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

  // 底部按钮
  &-footer--button {
    margin-right: var(--#{$name}-footer-button-margin-right);
    font-size: var(--#{$name}-popper-font-size);
    height: var(--#{$name}-footer-button-height);
    padding: var(--#{$name}-footer-button-padding);
    min-width: auto;
    border-radius: var(--ivue-border-radius);

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

  // light
  &-light {
    .#{$name}-inner {
      background-color: var(--ivue-white-color);
    }

    .#{$name}-title {
      color: var(--ivue-title-color);
      border-bottom-color: var(--ivue-border-color);
    }

    .#{$name}-body {
      color: var(--ivue-text-color);
    }

    .#{$name}-arrow {
      &:after {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        z-index: -1;
      }
    }

    // top
    &[data-popper-placement='top'] {
      .#{$name}-arrow {
        border-top-color: var(--ivue-white-color);

        &:after {
          left: var(--#{$name}-light-top-after-left);
          margin-left: var(--#{$name}-light-top-after-margin-left);
          bottom: 0;
          border-width: var(--#{$name}-light-top-after-border-width);
          border-top-color: var(--#{$name}-light-border-color);
        }
      }
    }

    // top-start
    &[data-popper-placement='top-start'] {
      .#{$name}-arrow {
        border-top-color: var(--ivue-white-color);

        &:after {
          left: var(--#{$name}-light-top-start-after-left);
          bottom: 0;
          border-width: var(--#{$name}-light-top-start-after-border-width);
          border-top-color: var(--#{$name}-light-border-color);
        }
      }
    }

    // top-end
    &[data-popper-placement='top-end'] {
      .#{$name}-arrow {
        border-top-color: var(--ivue-white-color);

        &:after {
          right: var(--#{$name}-light-top-end-after-right);
          bottom: 0;
          border-width: var(--#{$name}-light-top-end-after-border-width);
          border-top-color: var(--#{$name}-light-border-color);
        }
      }
    }

    // left-start
    &[data-popper-placement='left-start'] {
      .#{$name}-arrow {
        border-left-color: var(--ivue-white-color);

        &:after {
          top: var(--#{$name}-light-left-start-after-top);
          right: 0;
          border-width: var(--#{$name}-light-left-start-after-border-width);
          border-left-color: var(--#{$name}-light-border-color);
        }
      }
    }

    // left
    &[data-popper-placement='left'] {
      .#{$name}-arrow {
        border-left-color: var(--ivue-white-color);

        &:after {
          top: var(--#{$name}-light-left-after-top);
          margin-top: var(--#{$name}-light-left-after-margin-top);
          right: 0;
          border-width: var(--#{$name}-light-left-after-border-width);
          border-left-color: var(--#{$name}-light-border-color);
        }
      }
    }

    // left-end
    &[data-popper-placement='left-end'] {
      .#{$name}-arrow {
        border-left-color: var(--ivue-white-color);

        &:after {
          bottom: var(--#{$name}-light-left-end-after-bottom);
          right: 0;
          border-width: var(--#{$name}-light-left-end-after-border-width);
          border-left-color: var(--#{$name}-light-border-color);
        }
      }
    }

    // right-start
    &[data-popper-placement='right-start'] {
      .#{$name}-arrow {
        border-right-color: var(--ivue-white-color);

        &:after {
          top: var(--#{$name}-light-right-start-after-top);
          left: 0;
          border-width: var(--#{$name}-light-right-start-after-border-width);
          border-right-color: var(--#{$name}-light-border-color);
        }
      }
    }

    // right
    &[data-popper-placement='right'] {
      .#{$name}-arrow {
        border-right-color: var(--ivue-white-color);

        &:after {
          top: var(--#{$name}-light-right-after-top);
          margin-top: var(--#{$name}-light-right-after-margin-top);
          left: 0;
          border-width: var(--#{$name}-light-right-after-border-width);
          border-right-color: var(--#{$name}-light-border-color);
        }
      }
    }

    // right-end
    &[data-popper-placement='right-end'] {
      .#{$name}-arrow {
        border-right-color: var(--ivue-white-color);

        &:after {
          bottom: var(--#{$name}-light-right-end-after-bottom);
          left: 0;
          border-width: var(--#{$name}-light-right-end-after-border-width);
          border-right-color: var(--#{$name}-light-border-color);
        }
      }
    }

    // bottom-start
    &[data-popper-placement='bottom-start'] {
      .#{$name}-arrow {
        border-bottom-color: var(--ivue-white-color);

        &:after {
          left: var(--#{$name}-light-bottom-start-after-left);
          top: 0;
          border-width: var(--#{$name}-light-bottom-start-after-border-width);
          border-bottom-color: var(--#{$name}-light-border-color);
        }
      }
    }

    // bottom
    &[data-popper-placement='bottom'] {
      .#{$name}-arrow {
        border-bottom-color: var(--ivue-white-color);

        &:after {
          left: var(--#{$name}-light-bottom-after-left);
          margin-left: var(--#{$name}-light-bottom-after-margin-left);
          top: 0;
          border-width: var(--#{$name}-light-bottom-after-border-width);
          border-bottom-color: var(--#{$name}-light-border-color);
        }
      }
    }

    // bottom-end
    &[data-popper-placement='bottom-end'] {
      .#{$name}-arrow {
        border-bottom-color: var(--ivue-white-color);

        &:after {
          right: var(--#{$name}-light-bottom-end-after-right);
          top: 0;
          border-width: var(--#{$name}-light-bottom-end-after-border-width);
          border-bottom-color: var(--#{$name}-light-border-color);
        }
      }
    }
  }
}