.yc-message {
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  padding: 10px 16px;
  background-color: var(--color-bg-popup);
  border-color: var(--color-neutral-3);
  border-radius: var(--border-radius-small);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.1s cubic-bezier(0, 0, 1, 1);
  color: var(--color-text-1);
  line-height: 1;
  text-align: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  .yc-message-icon {
    vertical-align: middle;
    font-size: 20px;
    animation:
      arco-msg-fade 0.1s cubic-bezier(0, 0, 1, 1),
      arco-msg-fade 0.4s cubic-bezier(0.3, 1.3, 0.3, 1);
  }
  .yc-message-content {
    vertical-align: middle;
    font-size: 14px;
  }
}

// type
@message-type: {
  info: rgb(var(--primary-6));
  warning: rgb(var(--warning-6));
  success: rgb(var(--success-6));
  error: rgb(var(--danger-6));
  loading: rgb(var(--primary-6));
};
each(@message-type,  {
  .yc-message-@{key} {
    .yc-message-icon {
      color: @value;
    }
  }
});
