@import '../index.less';
@btri-notification-notice: ~'@{ant-prefix}-notification-notice';
@btri-nitification-icon: ~'@{ant-prefix}-btri-notification-notice-icon';
@btri-notification: ~'btri-notification';
.btri-notification {
  .@{ant-prefix}-notification-notice-close-x {
    font-size: 16px;
  }
  .@{btri-notification}-line {
    position: absolute;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: var(--gray-blue-2);
    left: 0;
    border-radius: 0 0 0 var(--border-radius-base);
    .@{btri-notification}-lineMain {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      background: var(--primary-6);
      animation: progressLine 5s 1 linear;
      z-index: 2;
    }
    &-success {
      background: var(--green-6) !important;
    }
    &-warning {
      background: var(--orange-6) !important;
    }
    &-error {
      background: var(--red-6) !important;
    }
    &-normal,
    &-info {
      background: var(--primary-color) !important;
    }
  }
  .@{btri-notification}-lineContainers-info {
    background: var(--gray-blue-2);
  }
  .@{btri-notification}-lineContainers-success {
    background: var(--green-1);
  }
  .@{btri-notification}-lineContainers-error {
    background: var(--red-1);
  }
  .@{btri-notification}-lineContainers-warning {
    background: var(--orange-1);
  }
  .@{btri-notification}-message {
    font-size: var(--h3-font-size);
    color: var(--gray-13);
    font-weight: 600;
    line-height: var(--h3-line-height);
    height: 22px;
    .@{btri-notification}-messageLine {
      width: 1px;
      height: calc(100% - 32px);
      position: absolute;
      top: 16px;
      left: 56px;
      background: var(--fill-2);
    }
  }
  .@{btri-notification}-description {
    font-size: var(--font-size-base);
    color: var(--caption-font);
    margin-top: 2px;
    // height: 22px;
    line-height: var(--h3-line-height);
    .@{btri-notification}-buttons {
      display: flex;
      justify-content: flex-end;
      margin-top: 16px;
    }
  }

  .@{btri-notification-notice} {
    padding: var(--padding-base);
    &-icon {
      height: calc(100% - 32px);
      display: flex;
      align-items: center;
      font-size: var(--h1-font-size);
    }
    .@{btri-nitification-icon} {
      margin-right: 4px !important;
      &-success {
        color: var(--green-6);
      }
      &-warning {
        color: var(--orange-6);
      }
      &-error {
        color: var(--red-6);
      }
      &-info {
        color: var(--primary-color);
      }
    }
    .@{btri-notification-notice}-message,
    .@{btri-notification-notice}-description {
      margin-left: 57px;
    }
  }
}

.normalContent {
  .@{btri-notification-notice}-message,
  .@{btri-notification-notice}-description {
    margin-left: 4px !important;
  }
}

.closeContainer {
  .@{btri-notification-notice}-message,
  .@{btri-notification-notice}-description {
    margin-left: 32px !important;
  }
  .@{btri-notification-notice}-icon {
    align-items: flex-start !important;
  }
}

.normalClose {
  .@{btri-notification-notice}-message,
  .@{btri-notification-notice}-description {
    margin-left: 0px !important;
  }
}

@keyframes progressLine {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}