{"version":3,"file":"blocks/FormUpload/style-index.css","mappings":";;;AAAA,gBAAgB;ACAhB;;;;EAAA;AAOA;EACC;ADAD;;ACIA;;;EAGC;ADDD;;ACIA;;;EAGC;ADDD;;ACIA;;;EAGC;ADDD;;ACIA;;;EAGC;ADDD;;ACKA;EAEC;ADFD;;ACAA;;EAEC;ADFD;;ACMA;;;EAGC;ADHD;;ACMA;;;EAGC;ADHD;;ACOA;;;EAGC;ADJD;;ACOA;;;EAGC;EACA;ADJD;;AA5DA;EACE;EACA;EACA;AA+DF;AA7DE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,oDACE;AA8DN;AA3DI;EACE;EACA;AA6DN;AA1DI;EACE;EACA;AA4DN;AAzDI;EACE;EACA;EACA;AA2DN;AAtDM;EACE;AAwDR;AAhDE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAkDJ;AAhDI;EACE;EACA;EACA;EACA;AAkDN;AA/CI;EACE;AAiDN;AA7CE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AA+CJ;AA5CE;EACE;EAIA;EACA;EACA;EACA;EACA;EACA;KAAA;UAAA;AA2CJ;AAxCE;EACE;EACA;EACA;EACA;EACA;AA0CJ;AAnCE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAqCJ;AAlCE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAoCJ;AAjCE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAmCJ;AAjCI;EACE;EACA;EACA;KAAA;AAmCN;AA/BE;EACE;EACA;AAiCJ;AA9BE;EACE;EACA;EACA;EACA;EACA;AAgCJ;AA7BE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AA+BJ;AA5BE;EACE;EACA;AA8BJ;AA3BE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA6BJ;AA3BI;EACE;EACA;AA6BN;AAzBE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;KAAA;UAAA;AA2BJ;AAxBE;EACE;EACA;AA0BJ,C","sources":["webpack://brandy-blocks/./src/blocks/FormUpload/style.scss","webpack://brandy-blocks/./src/styles/_form-input-styles.scss"],"sourcesContent":["@import \"../../styles/form-input-styles\";\n\n.wp-block-brandy-form-upload {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n\n  &__dropzone {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 100px;\n    padding: 24px 16px;\n    background-color: #f6f7f9;\n    border: 1.5px dashed #c5c8ce !important;\n    border-radius: 6px;\n    cursor: pointer;\n    transition:\n      border-color 0.2s,\n      background-color 0.2s;\n\n    &:hover {\n      border-color: #8c8f96 !important;\n      background-color: #f0f1f4;\n    }\n\n    &.is-dragging {\n      border-color: #0061fe !important;\n      background-color: #eef3ff;\n    }\n\n    &.has-file {\n      border-color: #3dce7c !important;\n      background-color: #f0faf4;\n      cursor: pointer;\n\n      // Suppress Chrome's \"No file chosen\" shadow-DOM tooltip but keep the\n      // input clickable so users can drop or pick more files at any time.\n      // Partial-accept handles the cap with a notice instead of blocking.\n      .wp-block-brandy-form-upload__input {\n        color: transparent;\n      }\n    }\n  }\n\n  // Informational notice about partial-accept (skipped or capped files).\n  // Intentionally NOT styled as a hard error — these are advisories, not\n  // failures. Amber palette, no shake, no dropzone border change.\n  &__error {\n    display: flex;\n    align-items: flex-start;\n    gap: 6px;\n    min-height: 0;\n    margin-top: 6px;\n    padding: 6px 10px;\n    color: #93370d;\n    background-color: #fffaeb;\n    border: 1px solid #fedf89;\n    border-radius: 4px;\n    font-size: 12px;\n    line-height: 1.4;\n    text-align: left;\n\n    &::before {\n      content: 'ⓘ';\n      flex-shrink: 0;\n      color: #b54708;\n      font-style: normal;\n    }\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__input {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n    cursor: pointer;\n    z-index: 1;\n  }\n\n  &__placeholder {\n    position: relative;\n    // No z-index here on purpose: a stacking context would trap the preview\n    // list's z-index:2 below the input's z-index:1, blocking clicks on the\n    // per-item remove (×) buttons when not at the file cap.\n    width: 100%;\n    color: #606770;\n    font-size: 14px;\n    text-align: center;\n    pointer-events: none;\n    user-select: none;\n  }\n\n  &__click-label {\n    vertical-align: baseline;\n    text-decoration: underline;\n    cursor: pointer;\n    pointer-events: all;\n    color: inherit;\n  }\n\n  // Multi-file preview list: each file becomes a compact pill that wraps.\n  // Pills themselves don't capture clicks — clicks pass through to the\n  // file input behind them so users can add more files. Only the per-item\n  // remove buttons receive clicks.\n  &__preview-list {\n    position: relative;\n    z-index: 2;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    width: 100%;\n    pointer-events: none;\n  }\n\n  &__preview-item {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    max-width: 100%;\n    padding: 4px 4px 4px 4px;\n    background: #fff;\n    border: 1px solid #d0d5dd;\n    border-radius: 999px;\n    pointer-events: none;\n  }\n\n  &__preview-thumb {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    overflow: hidden;\n    background: #f0f1f4;\n\n    img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n  }\n\n  &__preview-icon-small {\n    font-size: 16px;\n    line-height: 1;\n  }\n\n  &__preview-item-meta {\n    display: inline-flex;\n    flex-direction: column;\n    min-width: 0;\n    line-height: 1.2;\n    text-align: left;\n  }\n\n  &__preview-item-name {\n    max-width: 160px;\n    font-size: 12px;\n    font-weight: 500;\n    color: #1a1a1a;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &__preview-item-size {\n    font-size: 10px;\n    color: #606770;\n  }\n\n  &__preview-item-remove {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 22px;\n    height: 22px;\n    margin-left: 2px;\n    padding: 0;\n    border: none;\n    border-radius: 50%;\n    background: transparent;\n    color: #606770;\n    font-size: 11px;\n    line-height: 1;\n    cursor: pointer;\n    pointer-events: all;\n    transition: background 0.15s, color 0.15s;\n\n    &:hover {\n      background: #fde8e8;\n      color: #b42318;\n    }\n  }\n\n  &__preview-summary {\n    position: relative;\n    z-index: 2;\n    width: 100%;\n    margin-top: 4px;\n    color: #606770;\n    font-size: 11px;\n    text-align: left;\n    pointer-events: none;\n    user-select: none;\n  }\n\n  &__preview-add-hint {\n    color: #0061fe;\n    font-weight: 500;\n  }\n}\n\n","/**\n * Form Input Styles — CSS custom property targets.\n * Import this in each form block's style.scss.\n * Applied to blocks with --fi-* CSS vars on the wrapper.\n */\n\n// Label color\n[style*=\"--fi-label-color\"] label {\n\tcolor: var(--fi-label-color) !important;\n}\n\n// Normal state — input elements\n[style*=\"--fi-input-bg\"] input,\n[style*=\"--fi-input-bg\"] textarea,\n[style*=\"--fi-input-bg\"] select {\n\tbackground-color: var(--fi-input-bg) !important;\n}\n\n[style*=\"--fi-input-color\"] input,\n[style*=\"--fi-input-color\"] textarea,\n[style*=\"--fi-input-color\"] select {\n\tcolor: var(--fi-input-color) !important;\n}\n\n[style*=\"--fi-input-border\"] input,\n[style*=\"--fi-input-border\"] textarea,\n[style*=\"--fi-input-border\"] select {\n\tborder-color: var(--fi-input-border) !important;\n}\n\n[style*=\"--fi-input-radius\"] input,\n[style*=\"--fi-input-radius\"] textarea,\n[style*=\"--fi-input-radius\"] select {\n\tborder-radius: var(--fi-input-radius) !important;\n}\n\n// Placeholder\n[style*=\"--fi-placeholder\"] input::placeholder,\n[style*=\"--fi-placeholder\"] textarea::placeholder {\n\tcolor: var(--fi-placeholder) !important;\n}\n\n// Hover state\n[style*=\"--fi-hover-bg\"] input:hover,\n[style*=\"--fi-hover-bg\"] textarea:hover,\n[style*=\"--fi-hover-bg\"] select:hover {\n\tbackground-color: var(--fi-hover-bg) !important;\n}\n\n[style*=\"--fi-hover-border\"] input:hover,\n[style*=\"--fi-hover-border\"] textarea:hover,\n[style*=\"--fi-hover-border\"] select:hover {\n\tborder-color: var(--fi-hover-border) !important;\n}\n\n// Focus state\n[style*=\"--fi-focus-bg\"] input:focus,\n[style*=\"--fi-focus-bg\"] textarea:focus,\n[style*=\"--fi-focus-bg\"] select:focus {\n\tbackground-color: var(--fi-focus-bg) !important;\n}\n\n[style*=\"--fi-focus-border\"] input:focus,\n[style*=\"--fi-focus-border\"] textarea:focus,\n[style*=\"--fi-focus-border\"] select:focus {\n\tborder-color: var(--fi-focus-border) !important;\n\toutline: none;\n}\n"],"names":[],"sourceRoot":""}