.arco-modal {
  &.arco-modal-mini {
    width: 360px;
  }

  &.arco-modal-small {
    width: 480px;
  }

  &.arco-modal-default {
    width: 560px;
  }

  &.arco-modal-medium {
    width: 720px;
  }

  &.arco-modal-large {
    width: 1120px;
  }

  .arco-modal-footer {
    .arco-btn {
      margin-left: 8px;
    }
  }

  &.arco-modal-borderless {
    .arco-modal-header {
      border-bottom: none;
    }

    .arco-modal-content {
      padding-top: 8px;
    }

    .arco-modal-footer {
      border-top: none;
      padding-top: 0;
      padding-bottom: 24px;
    }
  }

  &.arco-modal-content-no-padding {
    .arco-modal-content {
      padding-top: 0;
      padding-bottom: 0;
    }
  }

  // close
  .arco-modal-close-icon {
    line-height: 1;
    height: 14px;
    color: var(--color-text-3);

    .easyv-icon {
      position: relative;

      &::before {
        content: '';
        position: absolute;
        display: block;
        border-radius: 4px;
        top: 50%;
        left: 50%;
        height: 20px;
        width: 20px;
        transform: translate(-50%, -50%);
        transition: background-color 0.1s cubic-bezier(0, 0, 1, 1);
      }

      svg {
        position: relative;
      }
    }

    &:hover {
      color: var(--color-text-1);

      .easyv-icon {
        &::before {
          background-color: var(--color-fill-1);
        }
      }
    }
  }

  // info
  .arco-icon-info-circle-fill {
    color: rgb(var(--link-6));
  }

  // 调整 modal.[xxx] 的内容左边距，主题配置不支持修改
  &.arco-modal-simple {
    .arco-modal-content {
      padding-left: 28px;
    }
  }

  .arco-modal-content {
    color: var(--color-text-2);
  }
}