@charset "UTF-8";
/**
 * YH-UI Sass Variables
 * 原具体的 CSS 变量输出规则 (:root, html.dark 等) 已移至 root.scss，以防止各组件样式编译时产生重复的全局变量 CSS 冗余。
 */
.yh-notification {
  position: fixed;
  display: flex;
  width: 330px;
  padding: 20px;
  background-color: var(--yh-notification-bg-color);
  border: 1px solid var(--yh-notification-border-color);
  border-radius: var(--yh-border-radius-base);
  box-shadow: var(--yh-notification-shadow);
  transition: all var(--yh-duration-base) var(--yh-timing-ease-in-out);
  overflow: hidden;
  box-sizing: border-box;
  z-index: var(--yh-z-index-modal);
}
.yh-notification--top-right {
  right: 16px;
}

.yh-notification--top-left {
  left: 16px;
}

.yh-notification--top-center {
  left: 50%;
  transform: translateX(-50%);
}

.yh-notification--bottom-right {
  right: 16px;
}

.yh-notification--bottom-left {
  left: 16px;
}

.yh-notification--bottom-center {
  left: 50%;
  transform: translateX(-50%);
}

.yh-notification--success {
  border-color: var(--yh-color-success-light-7);
}
.yh-notification--success .yh-notification__title {
  color: var(--yh-color-success);
}

.yh-notification--warning {
  border-color: var(--yh-color-warning-light-7);
}
.yh-notification--warning .yh-notification__title {
  color: var(--yh-color-warning);
}

.yh-notification--info {
  border-color: var(--yh-color-info-light-7);
}
.yh-notification--info .yh-notification__title {
  color: var(--yh-color-info);
}

.yh-notification--error {
  border-color: var(--yh-color-danger-light-7);
}
.yh-notification--error .yh-notification__title {
  color: var(--yh-color-danger);
}

.yh-notification__icon {
  margin-right: 12px;
  font-size: 24px;
  line-height: 24px;
  flex-shrink: 0;
}
.yh-notification__icon svg {
  width: 24px;
  height: 24px;
  vertical-align: top;
}
.yh-notification__icon--success {
  color: var(--yh-color-success);
}

.yh-notification__icon--warning {
  color: var(--yh-color-warning);
}

.yh-notification__icon--info {
  color: var(--yh-color-info);
}

.yh-notification__icon--error {
  color: var(--yh-color-danger);
}

.yh-notification__icon--default {
  color: var(--yh-text-color-regular);
}

.yh-notification__content {
  flex: 1;
  padding-right: 16px;
}

.yh-notification__title {
  margin: 0 0 8px;
  font-size: var(--yh-font-size-md);
  font-weight: var(--yh-font-weight-semibold);
  line-height: 24px;
  color: var(--yh-notification-title-color);
}

.yh-notification__message {
  margin: 0;
  font-size: var(--yh-font-size-base);
  line-height: 1.5;
}

.yh-notification__text {
  margin: 0;
  color: var(--yh-notification-content-color);
  word-break: break-word;
}

.yh-notification__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  color: var(--yh-text-color-secondary);
  transition: color var(--yh-duration-fast);
}
.yh-notification__close:hover {
  color: var(--yh-text-color-primary);
}
.yh-notification__close svg {
  width: 100%;
  height: 100%;
}

.yh-notification-top-right-enter-active, .yh-notification-top-right-leave-active {
  transition: all var(--yh-duration-base) var(--yh-timing-ease-in-out);
}
.yh-notification-top-right-enter-from, .yh-notification-top-right-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

.yh-notification-top-left-enter-active, .yh-notification-top-left-leave-active {
  transition: all var(--yh-duration-base) var(--yh-timing-ease-in-out);
}
.yh-notification-top-left-enter-from, .yh-notification-top-left-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}

.yh-notification-bottom-right-enter-active, .yh-notification-bottom-right-leave-active {
  transition: all var(--yh-duration-base) var(--yh-timing-ease-in-out);
}
.yh-notification-bottom-right-enter-from, .yh-notification-bottom-right-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

.yh-notification-bottom-left-enter-active, .yh-notification-bottom-left-leave-active {
  transition: all var(--yh-duration-base) var(--yh-timing-ease-in-out);
}
.yh-notification-bottom-left-enter-from, .yh-notification-bottom-left-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}

.yh-notification-top-center-enter-active, .yh-notification-top-center-leave-active {
  transition: all var(--yh-duration-base) var(--yh-timing-ease-in-out);
}
.yh-notification-top-center-enter-from, .yh-notification-top-center-leave-to {
  opacity: 0;
  transform: translateX(-50%) translateY(-100%);
}

.yh-notification-bottom-center-enter-active, .yh-notification-bottom-center-leave-active {
  transition: all var(--yh-duration-base) var(--yh-timing-ease-in-out);
}
.yh-notification-bottom-center-enter-from, .yh-notification-bottom-center-leave-to {
  opacity: 0;
  transform: translateX(-50%) translateY(100%);
}