.pisell-alert-wrap {
  border-radius: 12px;
  padding: 16px;
  position: relative;
  .pisell-lowcode-alert-close-icon {
    font-size: 18px;
    padding: 9px;
    position: absolute;
    top: 8px;
    right: 8px;
    color: inherit;
    .anticon-close {
      color: inherit;
    }
  }
  .pisell-alert-type-icon {
    font-size: 20px;
    top: 4px;
    margin-right: 16px;
    &:before {
      position: absolute;
      content: '';
      width: 28px;
      height: 28px;
      border-radius: 20px;
      border-width: 2px;
      border-style: solid;
      border-color: inherit;
      opacity: 0.3;
      z-index: 2;
      top: -4px;
      left: -4px;
    }
    &:after {
      position: absolute;
      z-index: 2;
      content: '';
      width: 36px;
      height: 36px;
      border-radius: 20px;
      border-width: 2px;
      border-style: solid;
      border-color: inherit;
      opacity: 0.1;
      top: -8px;
      left: -8px;
    }
  }
  .pisell-lowcode-alert-message {
    color: inherit;
    font-weight: 600;
  }
  .pisell-lowcode-alert-description {
    color: inherit;
  }
  .pisell-alert-action-wrap {
    margin-top: 12px;
    display: flex;
    gap: 12px;
    .pisell-action-item {
      cursor: pointer;
      font-weight: 600;
    }
  }
}

.pisell-lowcode-alert-success {
  border: 1px solid var(--Success-600, #079455);
  background: var(--Success-25, #f6fef9);
  color: var(--Success-700, #067647);
  .pisell-alert-type-icon {
    color: #079455;
    line-height: 1;
    position: relative;
  }
  .pisell-alert-action-wrap {
    .pisell-action-item.pisell-action-dismiss {
      color: var(--Success-600, #079455);
    }
  }
  .pisell-lowcode-alert-close-icon {
    .anticon-close {
      color: #17B26A;
    }
  }
}

.pisell-lowcode-alert-info {
  border: 1px solid var(--Blue-300, #84caff);
  background: var(--Blue-50, #eff8ff);
  color: var(--Blue-700, #175CD3);
  .pisell-alert-type-icon {
    color: #1570ef;
    line-height: 1;
    position: relative;
  }
  .pisell-alert-action-wrap {
    .pisell-action-item.pisell-action-dismiss {
      color: var(--Blue-600, #1570EF);
    }
  }
  .pisell-lowcode-alert-close-icon {
    .anticon-close {
      color: #2E90FA
    }
  }
}

.pisell-lowcode-alert-warning {
  border: 1px solid var(--Warning-300, #fec84b);
  background: var(--Warning-25, #fffcf5);
  color: var(--Warning-700, #B54708);
  .pisell-alert-type-icon {
    color: #dc6803;
    line-height: 1;
    position: relative;
  }
  .pisell-alert-action-wrap {
    .pisell-action-item.pisell-action-dismiss {
      color: var(--Warning-600, #DC6803);
    }
  }
  .pisell-lowcode-alert-close-icon {
    .anticon-close {
      color: #F79009
    }
  }
}

.pisell-lowcode-alert-error {
  border: 1px solid var(--Error-300, #fda29b);
  background: var(--Error-25, #fffbfa);
  color: var(--Error-700, #B42318);
  .pisell-alert-type-icon {
    color: #d92d20;
    line-height: 1;
    position: relative;
  }
  .pisell-alert-action-wrap {
    .pisell-action-item.pisell-action-dismiss {
      color: var(--Error-600, #D92D20);
    }
  }
  .pisell-lowcode-alert-close-icon {
    .anticon-close {
      color: #F04438
    }
  }
}