$name: 'ivue-notice';

:root {
  --#{$name}-width: 335px;

  // icon
  --#{$name}-font-size: 17px;
  --#{$name}-line-height: 19px;

  // notice
  --#{$name}-notice-padding: 16px;
  --#{$name}-notice-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  --#{$name}-notice-radius: 8px;
  --#{$name}-notice-position: 16px;
  --#{$name}-close-position-right: 10px;
  --#{$name}-close-position-top: 15px;

  // icon
  --#{$name}-close-icon-font-size: 16px;
  --#{$name}-close-icon-position: -3px;

  // have-desc
  --#{$name}-have-desc-close-position: 12px;

  // have-icon
  --#{$name}-have-icon-margin-left: 51px;
  --#{$name}-have-icon-title-margin-left: 26px;

  // have-desc
  --#{$name}-have-desc-icon-top: -2px;
  --#{$name}-have-desc-font-size: 36px;
  --#{$name}-have-desc-title-margin-bottom: 8px;

  // title
  --#{$name}-title-padding-right: 10px;
  --#{$name}-title-line-height: 19px;

  // color
  --#{$name}-close-hover-color: #444444;
}

.#{$name} {
  position: fixed;
  width: var(--#{$name}-width);
  z-index: 1000;

  .#{$name}-icon {
    position: absolute;
    font-size: var(--#{$name}-font-size);
    width: auto;
    min-width: auto;
    height: auto;
    line-height: var(--#{$name}-line-height);

    &-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);
    }
  }

  &-notice {
    padding: var(--#{$name}-notice-padding);
    border-radius: var(--#{$name}-notice-radius);
    box-shadow: var(--#{$name}-notice-shadow);
    overflow: hidden;
    background-color: var(--ivue-white-color);
    transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s,
      bottom 0.3s;

    &.right {
      right: var(--#{$name}-notice-position);
    }

    &.left {
      left: var(--#{$name}-notice-position);
    }

    // close
    &-close {
      position: absolute;
      right: var(--#{$name}-close-position-right);
      top: var(--#{$name}-close-position-top);
      outline: none;
      color: var(--ivue-legend-color);
      cursor: pointer;

      i {
        position: relative;
        top: var(--#{$name}-close-icon-position);
        font-size: var(--#{$name}-close-icon-font-size);
        transition: color var(--ivue-default-transition-time)
          var(--ivue-ease-in-out);
        width: auto;
        min-width: auto;
        height: auto;

        &:hover {
          color: var(--#{$name}-close-hover-color);
        }
      }
    }

    &-have-desc &-close {
      top: var(--#{$name}-have-desc-close-position);
    }

    &-content-render {
      .#{$name}-desc {
        display: none;
      }
    }
  }

  &-content {
    position: relative;
  }

  &-content-have-icon {
    margin-left: var(--#{$name}-have-icon-margin-left);
  }

  .#{$name}-have-desc.#{$name}-have-icon &-title {
    margin-left: var(--#{$name}-have-icon-margin-left);
  }

  .#{$name}-have-desc.#{$name}-have-icon &-desc {
    margin-left: var(--#{$name}-have-icon-margin-left);
  }

  &-have-desc .#{$name}-icon {
    top: var(--#{$name}-have-desc-icon-top);
    font-size: var(--#{$name}-have-desc-font-size);
    line-height: 1;
  }

  &-have-icon &-title {
    margin-left: var(--#{$name}-have-icon-title-margin-left);
  }

  // 标题
  &-title {
    padding-right: var(--#{$name}-title-padding-right);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--ivue-font-default-size);
    line-height: var(--#{$name}-title-line-height);
    color: var(--ivue-title-color);
    overflow: hidden;
    font-weight: bold;
  }

  // 描述
  &-desc {
    font-size: var(--ivue-font-base-siz);
    color: var(--ivue-text-color);
    text-align: justify;
    line-height: 1.5;
  }

  &-have-desc &-title {
    margin-bottom: var(--#{$name}-have-desc-title-margin-bottom);
  }
}

.ivue-notification-fade-enter-from {
  &.right {
    right: 0;
    transform: translateX(100%);
  }

  &.left {
    left: 0;
    transform: translateX(-100%);
  }
}

.ivue-notification-fade-leave-to {
  opacity: 0;
}