@layer components {
  .notification_positioner {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 25vw;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    align-items: stretch;
    gap: 10px;
  }
  .message_box_positioner {
    position: absolute;
  }
  .toast_positioner {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20vh;
  }
  .notification {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    border-radius: 2px;
    .notification_icon {
      flex-shrink: 0;
      font-size: 24px;
    }
    .notificaiton_content {
      flex-grow: 1;
      .notification_title {
        font-size: 1.4em;
        font-weight: bold;
      }
    }
    .notification_close {
      flex-shrink: 0;
      font-size: 16px;
      align-self: flex-start;
      cursor: pointer;
    }
  }
  .toast {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding: 4px 8px;
    border-radius: 2px;
    width: 35vw;
    .toast_icon {
      flex-shrink: 0;
      font-size: 18px;
    }
    .toast_content {
      flex-grow: 1;
      display: inline-block;
      overflow-wrap: break-word;
    }
    .toast_close {
      flex-shrink: 0;
      font-size: 14px;
      cursor: pointer;
    }
  }
  .kind_info {
    color: var(--color-typo-dark);
    background-color: var(--color-info);
    box-shadow: 2px 2px 4px oklch(from var(--color-info) l c h / 40%);
  }
  .kind_promption {
    color: var(--color-typo-dark);
    background-color: var(--color-blue);
    box-shadow: 2px 2px 4px oklch(from var(--color-blue) l c h / 40%);
  }
  .kind_success {
    color: var(--color-typo-dark);
    background-color: var(--color-success);
    box-shadow: 2px 2px 4px oklch(from var(--color-success) l c h / 40%);
  }
  .kind_warning {
    color: var(--color-typo-dark);
    background-color: var(--color-warn);
    box-shadow: 2px 2px 4px oklch(from var(--color-warn) l c h / 40%);
  }
  .kind_error {
    color: var(--color-typo-dark);
    background-color: var(--color-danger);
    box-shadow: 2px 2px 4px oklch(from var(--color-danger) l c h / 40%);
  }
  .kind_custom {
    color: var(--color-typo-dark);
    background-color: var(--color-wumeizi);
    box-shadow: 2px 2px 4px oklch(from var(--color-wumeizi) l c h / 40%);
  }
  .slide_in_enter {
    transform: translateX(100%);
    opacity: 0;
  }
  .slide_in_enter_active {
    transition: all 500ms ease-in-out;
    transform: translateX(0);
    opacity: 1;
  }
  .slide_out_exit_active {
    transition: all 500ms ease-in-out;
    opacity: 0;
  }
  .fade_in_enter {
    opacity: 0;
  }
  .fade_in_enter_active {
    transition: all 500ms ease-in-out;
    opacity: 1;
  }
  .fade_out_exit_active {
    transition: all 500ms ease-in-out;
    opacity: 0;
  }
}