{"version":3,"file":"blocks/ImageHotspots/index.css","mappings":";;;AAEE;EACE;EACA;EACA;AADJ;AAGI;EACE;AADN;AAKE;EACE;EACA;EACA;AAHJ;AAME;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAJJ;AAMI;EAZF;IAaI;EAHJ;AACF;AAKI;EACE;AAHN;AAKM;EACE;AAHR;AAOI;EACE;EAEA;AANN;AAQM;EACE;EACA;AANR;AASM;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAPR;AASQ;EACE;AAPV;AAaE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAXJ;AAaI;EATF;IAUI;EAVJ;AACF;AAYI;EACE;EACA;EACA;EACA;EACA;AAVN;AAYM;EACE;AAVR;AAaM;EACE;EACA;EACA;EACA;AAXR;AAeI;EACE;EACA;EACA;EACA;EACA;AAbN;AAeM;EAPF;IAQI;EAZN;AACF;AAcM;EAXF;IAYI;EAXN;AACF;AAgBM;EAlBF;IAmBI,iGACE;EAdR;AACF;AAiBM;EAxBF;IAyBI,gHACE;EAfR;AACF;AAkBM;EA9BF;IA+BI,+HACE;EAhBR;AACF;AAmBM;EACE;EACA;AAjBR;AAmBU;EACE;AAjBZ;AAoBQ;EACE;EACA;AAlBV;AAuBI;EACE;EACA;EACA;EACA;EACA;AArBN;AAuBM;EACE;AArBR,C;;;;ACvIC;EACC;EACA;EACA;EACA;EACA;KAAA;UAAA;EAGA;AAJF;AAOC;EACC;EACA;EACA;EACA;EACA;AALF;;AAUA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAPD;AAWC;EAEC;AAVF;AAaC;EACC;AAXF;AAcC;EACC;AAZF;;AAgBA;EACC;EACA;EACA;EACA;EACA;AAbD;;AAgBA;EACC;EACA;EACA;EACA;AAbD;;AAkBA;EACC;EACA;EACA;AAfD;;AAmBA;EACC;EACA;EACA;EACA;AAhBD;AAkBC;EACC;EACA;AAhBF;;AAqBA;EACC;EACA;EACA;AAlBD,C","sources":["webpack://brandy-blocks/./src/components/IconsModal/index.scss","webpack://brandy-blocks/./src/blocks/ImageHotspots/editor.scss"],"sourcesContent":["// Style for the icon library modal.\n.brandy-icon-inserter__modal {\n  .components-modal__content {\n    flex: 1 1 0%;\n    overflow: auto;\n    padding: 0px;\n\n    &:before {\n      margin-bottom: 0;\n    }\n  }\n\n  .icon-inserter {\n    align-items: stretch;\n    display: flex;\n    height: 100%;\n  }\n\n  .icon-inserter__sidebar {\n    display: none;\n    flex-direction: column;\n    flex-shrink: 0;\n    width: 280px;\n    padding: 24px 32px 32px;\n    position: sticky;\n    top: 0;\n    align-self: flex-start;\n    max-height: 100vh;\n    overflow-y: auto;\n\n    @media (min-width: 900px) {\n      display: flex;\n    }\n\n    &__search {\n      margin-bottom: 16px;\n\n      .components-base-control__field {\n        margin-bottom: 0;\n      }\n    }\n\n    &__category-type {\n      padding: 0 32px 32px;\n      // Override core component styles.\n      border: none;\n\n      .components-menu-group__label {\n        margin: 0;\n        padding: 16px 12px 16px;\n      }\n\n      .components-menu-item__item {\n        align-items: flex-start;\n        display: inline-flex;\n        justify-content: space-between;\n        white-space: normal;\n        width: 100%;\n        text-align: left;\n        text-transform: capitalize;\n\n        & > span {\n          opacity: 0.5;\n        }\n      }\n    }\n  }\n\n  .icon-inserter__content {\n    display: flex;\n    flex-direction: column;\n    flex-shrink: 0;\n    overflow: auto;\n    padding: 24px 32px;\n    border-left: 1px solid #dedede;\n    width: 100%;\n\n    @media (min-width: 900px) {\n      width: calc(100% - 281px);\n    }\n\n    .icon-inserter__content-header {\n      align-items: center;\n      display: flex;\n      height: 40px;\n      justify-content: space-between;\n      margin-bottom: 24px;\n\n      .search-results {\n        color: #757575;\n      }\n\n      .components-select-control {\n        flex-direction: row;\n        justify-content: right;\n        align-items: center;\n        gap: 20px;\n      }\n    }\n\n    .icons-list {\n      padding: 4px 0px 72px 0px;\n      margin: 0;\n      display: grid;\n      row-gap: 30px;\n      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);\n\n      @media (min-width: 600px) {\n        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);\n      }\n\n      @media (min-width: 900px) {\n        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(\n            0,\n            1fr\n          );\n      }\n\n      @media (min-width: 1100px) {\n        grid-template-columns:\n          minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)\n          minmax(0, 1fr);\n      }\n\n      @media (min-width: 1450px) {\n        grid-template-columns:\n          minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)\n          minmax(0, 1fr) minmax(0, 1fr);\n      }\n\n      @media (min-width: 1600px) {\n        grid-template-columns:\n          minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)\n          minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);\n      }\n\n      .icons-list__item {\n        align-items: center;\n        gap: 10px;\n        .icons-list__item-icon {\n          i {\n            font-size: 32px;\n          }\n        }\n        &.is-active {\n          background-color: var(--wp-admin-theme-color);\n          color: rgb(255 255 255 / 80%);\n        }\n      }\n    }\n\n    .block-editor-inserter__no-results {\n      height: calc(100% - 56px);\n      margin-top: 0;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n\n      svg {\n        margin: 0 auto;\n      }\n    }\n  }\n}\n","// Image Hotspots Block - Editor Styles\n\n.brandy-image-hotspots {\n\t.brandy-image-hotspots__stage {\n\t\tposition: relative;\n\t\tdisplay: inline-block;\n\t\twidth: 100%;\n\t\tcursor: crosshair;\n\t\tuser-select: none;\n\t\t// Matches the frontend: radius inherits from the block wrapper and no\n\t\t// overflow clip, so markers near the edge stay draggable.\n\t\tborder-radius: inherit;\n\t}\n\n\t.brandy-image-hotspots__image {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tpointer-events: none;\n\t\tborder-radius: inherit;\n\t}\n}\n\n// Marker base — shared dot + number\n.brandy-hotspot-marker {\n\tposition: absolute;\n\ttransform: translate(-50%, -50%);\n\twidth: 28px;\n\theight: 28px;\n\tborder: 2px solid #fff;\n\tborder-radius: 50%;\n\tbackground: var(--brandy-marker-color, #0061fe);\n\tcursor: grab;\n\tpadding: 0;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbox-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);\n\ttransition: box-shadow 0.15s ease;\n\tz-index: 10;\n\n\t// style-index.css (loaded in editor too) has :hover { transform: scale(1.15) }.\n\t// editorStyle loads after style, so this rule wins and preserves the centering translate.\n\t&:hover,\n\t&:focus-visible {\n\t\ttransform: translate(-50%, -50%);\n\t}\n\n\t&:active {\n\t\tcursor: grabbing;\n\t}\n\n\t&.is-selected {\n\t\tbox-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--brandy-marker-color, #0061fe);\n\t}\n}\n\n.brandy-hotspot-marker__dot {\n\tdisplay: block;\n\twidth: 10px;\n\theight: 10px;\n\tborder-radius: 50%;\n\tbackground: #fff;\n}\n\n.brandy-hotspot-marker__number {\n\tfont-size: 12px;\n\tfont-weight: 700;\n\tcolor: #fff;\n\tline-height: 1;\n}\n\n// Matches the frontend rule. Duplicated here alongside the dot and number\n// markers above, which the editor sheet already carries its own copies of.\n.brandy-hotspot-marker--icon i {\n\tfont-size: 16px;\n\tline-height: 1;\n\tcolor: #fff;\n}\n\n// Icon marker picker — chosen glyph, then the choose/remove buttons.\n.brandy-hotspot-icon-picker {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tmargin-top: 12px;\n\n\ti {\n\t\tfont-size: 20px;\n\t\tline-height: 1;\n\t}\n}\n\n// Inspector hint\n.brandy-hotspots-inspector-hint {\n\tcolor: #757575;\n\tfont-size: 12px;\n\tmargin: 0;\n}\n"],"names":[],"sourceRoot":""}