import "../../../../@ant-design/cssinjs/es/extractStyle.mjs";
import "../../../../@ant-design/cssinjs/es/hooks/useCacheToken.mjs";
import "react";
import "../../../../@ant-design/cssinjs/es/StyleContext.mjs";
import { unit as t } from "../../../../@ant-design/cssinjs/es/util/index.mjs";
import "../../../../@ant-design/cssinjs/es/hooks/useCompatibleInsertionEffect.mjs";
import "../../../../@ant-design/cssinjs/es/hooks/useEffectCleanupRegister.mjs";
import "../../../../@ant-design/cssinjs/es/hooks/useHMR.mjs";
import "../../../../rc-util/es/warning.mjs";
import "../../../../@ant-design/cssinjs/es/theme/createTheme.mjs";
import "../../../../@ant-design/cssinjs/es/theme/ThemeCache.mjs";
import "../../../../@ant-design/cssinjs/es/transformers/legacyLogicalProperties.mjs";
const l = (r) => {
  const {
    componentCls: i,
    iconCls: o
  } = r;
  return {
    [`${i}-wrapper`]: {
      [`${i}-drag`]: {
        position: "relative",
        width: "100%",
        height: "100%",
        textAlign: "center",
        background: r.colorFillAlter,
        border: `${t(r.lineWidth)} dashed ${r.colorBorder}`,
        borderRadius: r.borderRadiusLG,
        cursor: "pointer",
        transition: `border-color ${r.motionDurationSlow}`,
        [i]: {
          padding: r.padding
        },
        [`${i}-btn`]: {
          display: "table",
          width: "100%",
          height: "100%",
          outline: "none"
        },
        [`${i}-drag-container`]: {
          display: "table-cell",
          verticalAlign: "middle"
        },
        [`
          &:not(${i}-disabled):hover,
          &-hover:not(${i}-disabled)
        `]: {
          borderColor: r.colorPrimaryHover
        },
        [`p${i}-drag-icon`]: {
          marginBottom: r.margin,
          [o]: {
            color: r.colorPrimary,
            fontSize: r.uploadThumbnailSize
          }
        },
        [`p${i}-text`]: {
          margin: `0 0 ${t(r.marginXXS)}`,
          color: r.colorTextHeading,
          fontSize: r.fontSizeLG
        },
        [`p${i}-hint`]: {
          color: r.colorTextDescription,
          fontSize: r.fontSize
        },
        // ===================== Disabled =====================
        [`&${i}-disabled`]: {
          [`p${i}-drag-icon ${o},
            p${i}-text,
            p${i}-hint
          `]: {
            color: r.colorTextDisabled
          }
        }
      }
    }
  };
}, u = l;
export {
  u as default
};
