$name: 'ivue-message';

:root {
  --#{$name}-top: 16px;
  --#{$name}-left: 50%;
  --#{$name}-transform: translateX(-50%);

  // close
  --#{$name}-close-right: 4px;
  --#{$name}-close-font-size: 16px;

  // 内容
  --#{$name}-notice-content-padding: 8px 16px;
  --#{$name}-notice-content-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  --#{$name}-notice-content-text-margin-left: 5px;
  --#{$name}-notice-closable-margin-right: 32px;

  // icon
  --#{$name}-icon-margin-right: 4px;
  --#{$name}-icon-font-size: 18px;

  // loading
  --#{$name}-loading-margin-right: 4px;
  --#{$name}-loading-width: 16px;

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

.#{$name} {
  position: fixed;
  top: var(--#{$name}-top);
  left: var(--#{$name}-left);
  font-size: var(--ivue-font-base-size);
  z-index: 1010;
  transform: var(--#{$name}-transform);
  pointer-events: none;
  transition: opacity 0.3s, transform 0.4s, top 0.4s;

  &-notice {
    text-align: center;

    &:first-child {
      margin-top: -8px;
    }

    // 关闭按钮
    &-close {
      position: absolute;
      right: var(--#{$name}-close-right);
      top: 0;
      bottom: 0;
      color: var(--ivue-legend-color);
      display: flex;
      align-items: center;
      cursor: pointer;

      i {
        font-size: var(--#{$name}-close-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);
        }
      }
    }
  }

  &-notice-have-background {
    &-success {
      .#{$name}-notice-content {
        color: var(--ivue-white-color);
        background: var(--ivue-success-color);
        border: 1px solid var(--ivue-success-color);
      }

      .ivue-icon {
        color: var(--ivue-white-color);
      }
    }

    &-info {
      .#{$name}-notice-content {
        background: var(--ivue-primary-color);
        color: var(--ivue-white-color);
        border: 1px solid var(--ivue-primary-color);
      }

      .ivue-icon {
        color: var(--ivue-white-color);
      }
    }

    &-warning {
      .#{$name}-notice-content {
        background: var(--ivue-warning-color);
        color: var(--ivue-white-color);
        border: 1px solid var(--ivue-warning-color);
      }

      .ivue-icon {
        color: var(--ivue-white-color);
      }
    }

    &-error {
      .#{$name}-notice-content {
        background: var(--ivue-error-color);
        color: var(--ivue-white-color);
        border: 1px solid var(--ivue-error-color);
      }

      .ivue-icon {
        color: var(--ivue-white-color);
      }
    }

    .#{$name}-notice-content {
      box-shadow: none;
    }
  }

  // 内容
  &-notice-content {
    display: flex;
    align-items: center;
    position: relative;
    padding: var(--#{$name}-notice-content-padding);
    pointer-events: all;
    box-shadow: var(--#{$name}-notice-content-shadow);
    background-color: var(--ivue-white-color);
    border-radius: var(--ivue-border-radius);

    &-text {
      margin-left: var(--#{$name}-notice-content-text-margin-left);
      display: inline-block;
    }
  }

  &-notice-closable &-notice-content-text {
    margin-right: var(--#{$name}-notice-closable-margin-right);
  }

  &-content {
    span {
      vertical-align: middle;
    }
  }

  &-icon {
    margin-right: var(--#{$name}-icon-margin-right);
    font-size: var(--#{$name}-icon-font-size);
    vertical-align: middle;
    width: auto;
    min-width: auto;
    height: auto;

    &-success {
      color: var(--ivue-success-color);
    }

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

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

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

  &-loading {
    margin-right: var(--#{$name}-loading-margin-right);
    width: var(--#{$name}-loading-width);
    color: var(--ivue-primary-color);
    vertical-align: middle;
  }

  .ivue-progress-circular-overlay {
    stroke: currentColor;
    z-index: 2;
    transition: all 0.6s ease-in-out;
  }

  .ivue-progress-circular-indeterminate {
    display: inline-block;
  }

  .ivue-load-loop {
    animation: ivue-load-loop 1s linear infinite;
  }

  @keyframes ivue-load-loop {
    from {
      transform: rotate(0deg);
    }

    50% {
      transform: rotate(180deg);
    }

    to {
      transform: rotate(360deg);
    }
  }
}

.#{$name}-message-fade-enter-from,
.#{$name}-message-fade-leave-to {
  opacity: 0;
  transform: translate(-50%, -100%);
}