:root {
  --yl-color-primary: #007aff;
  --yl-color-success: #4cd964;
  --yl-color-warning: #f0ad4e;
  --yl-color-error: #dd524d;

  --yl-mask-bg: rgba(0, 0, 0, 0.4);

  --yl-text-color: #333;

  --yl-border-color: #c8c7cc;

  --yl-elevation-0: 0px 0px 0px 0px rgb(0 0 0 / 0.2),
    0px 0px 0px 0px rgb(0 0 0 / 0.14), 0px 0px 0px 0px rgb(0 0 0 / 0.12);
  --yl-elevation-1: 0px 3px 1px -2px rgb(0 0 0 / 0.2),
    0px 2px 2px 0px rgb(0 0 0 / 0.14), 0px 1px 5px 0px rgb(0 0 0 / 0.12);
  --yl-elevation-2: 0px 2px 4px -1px rgb(0 0 0 / 0.2),
    0px 4px 5px 0px rgb(0 0 0 / 0.14), 0px 1px 10px 0px rgb(0 0 0 / 0.12);
  --yl-elevation-3: 0px 5px 5px -3px rgb(0 0 0 / 0.2),
    0px 8px 10px 1px rgb(0 0 0 / 0.14), 0px 3px 14px 2px rgb(0 0 0 / 0.12);
  --yl-elevation-4: 0px 5px 5px -3px rgb(0 0 0 / 0.2),
    0px 8px 10px 1px rgb(0 0 0 / 0.14), 0px 3px 14px 2px rgb(0 0 0 / 0.12);
  --yl-elevation-5: 0px 8px 10px -6px rgb(0 0 0 / 0.2),
    0px 16px 24px 2px rgb(0 0 0 / 0.14), 0px 6px 30px 5px rgb(0 0 0 / 0.12);

  --yl-modal-mask-bg: var(--yl-mask-bg);
  --yl-modal-z-index: 1000;

  --yl-modal-bg: white;
  --yl-modal-padding: 40rpx;
  --yl-modal-width: 75%;
  --yl-modal-margin-top: 28vh;
  --yl-modal-border-radius: 35rpx;

  --yl-modal-title-size: 32rpx;

  --yl-modal-space-title-main: 10rpx;
  --yl-modal-space-main-desc: 10rpx;

  --yl-modal-desc-color: #f8f8f8;

  --yl-modal-space-desc-action-bar: 40rpx;

  --yl-modal-action-bar-gap: 50rpx;
  --yl-modal-action-bar-padding: 0;

  --yl-modal-btn-padding: 20rpx 0;

  --yl-modal-cancel-bg-color: white;
  --yl-modal-cancel-text-color: var(--yl-text-color);
  --yl-modal-cancel-border: 1px solid var(--yl-border-color);

  --yl-modal-confirm-bg-color: var(--yl-color-primary);
  --yl-modal-confirm-text-color: white;
  --yl-modal-confirm-border: none;

  --yl-rating-column-gap: 20rpx;
  --yl-rating-star-size: 65rpx;
}