{"version":3,"file":"blocks/Modal/style-index.css","mappings":";;;AAAA;EACC;AACD;AACC;EACC;EACA;AACF;AAGE;EACC;AADH;AAIE;EACC;EACA;AAFH;;AAQA;EACE;AALF;AAME;EACC;EACA;AAJH,C;;;;AClBA;EACE;EAAA;AAFF;AAIE;EACE;EACA;EACA;AAFJ;AAII;EACE;EACA;EACA;AAFN;;AAUA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA,qHACE;AAVJ;AAaE;EACE;EACA;EACA;EACA,8EACE;AAZN;;AAoBA;EACE;EACA;AAjBF;;AAoBA;EACE;EACA;AAjBF;;AAoBA;EACE;EACA;AAjBF;;AAoBA;EACE;EACA;AAjBF;;AAoBA;EACE;EACA;AAjBF;;AAuBA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AApBF;;AAwBA;;EAEE;EACA;EACA;AArBF;;AAyBA;;EAEE;EACA;EACA;AAtBF;;AA4BA;EACE;AAzBF;AA2BE;EACE;AAzBJ;;AAkCA;EACE;EACA;AA/BF;;AAkCA;EACE;AA/BF;;AAmCA;EACE;EACA;EACA,sHACE;AAjCJ;;AAqCA;EACE;EACA;AAlCF;;AAsCA;EACE,sHACE;AApCJ;;AAyCA;EACE;EACA;AAtCF;;AA0CA;EACE;EACA;AAvCF;;AA2CA;EACE;EACA;AAxCF;;AA4CA;EACE;EACA;AAzCF;;AA6CA;EACE;EACA;AA1CF;;AA8CA;EACE;EACA;AA3CF;;AAgDE;EACE;AA7CJ;;AAoDA;EACE;;IAEE;EAjDF;AACF;AAuDA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AArDF;AAuDE;EACE;EACA;EACA;EACA;EACA;AArDJ;AAuDI;EACE;AArDN;AA0DE;EACE;EACA;EACA;AAxDJ;AA2DE;EACE;EACA;EACA;AAzDJ;AA4DE;EACE;EACA;EACA;AA1DJ;AA6DE;EACE;EACA;EACA;AA3DJ;;AAkEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA/DF;;AAkEA;EACE;AA/DF;;AAkEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA/DF;AAiEE;EACE;AA/DJ;AAmEE;EACE;AAjEJ;AAmEI;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAjEN;AAmEM;EACE;EACA;AAjER,C","sources":["webpack://brandy-blocks/./src/blocks/Modal/Edit/InspectorControls/style.scss","webpack://brandy-blocks/./src/blocks/Modal/style.scss"],"sourcesContent":[".brandy-modal-settings {\n\tmargin: 15px 0px;\n\n\t.components-grid.components-tools-panel {\n\t\tborder: none;\n\t\tpadding: 0px;\n\t}\n\n\t.brandy-border-control {\n\t\tlegend {\n\t\t\tmargin: 20px 0px;\n\t\t}\n\n\t\t.components-range-control__root {\n\t\t\tposition: relative;\n\t\t\tbottom: 7px;\n\t\t}\n\t}\n\n}\n\n.brandy-modal-padding-container-settings {\n\t\tmargin: 30px 0px;\n\t\t.components-input-control__container{\n\t\t\tposition: relative;\n\t\t\tbottom: -7px;\n\t\t}\n\t\t\n}","// ==========================================================\n// Button trigger styles\n// ==========================================================\n.modal-trigger-button {\n  width: fit-content;\n\n  &.is-style-outline {\n    background-color: transparent;\n    color: var(--wp--preset--color--brandy-foreground);\n    border: 2px solid var(--wp--preset--color--brandy-foreground);\n\n    &:hover {\n      background-color: var(--outline-button-hover-background-color);\n      color: var(--outline-button-hover-color);\n      border-color: var(--outline-button-hover-border-color, var(--wp--preset--color--brandy-foreground));\n    }\n  }\n}\n\n// ==========================================================\n// Backdrop — shared base for all positions\n// ==========================================================\n.brandy-modal-backdrop {\n  position: fixed;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  z-index: 10000;\n  margin: 0 !important;\n  max-width: unset !important;\n\n  // Hidden by default — shown via .is-open class.\n  visibility: hidden;\n  opacity: 0;\n  pointer-events: none;\n  transition:\n    opacity var(--modal-animation-duration, 300ms) ease,\n    visibility 0s var(--modal-animation-duration, 300ms);\n\n  &.is-open {\n    visibility: visible;\n    opacity: 1;\n    pointer-events: auto;\n    transition:\n      opacity var(--modal-animation-duration, 300ms) ease,\n      visibility 0s;\n  }\n}\n\n// ==========================================================\n// Position variants\n// ==========================================================\n.modal-position-center {\n  justify-content: center;\n  align-items: center;\n}\n\n.modal-position-top {\n  justify-content: center;\n  align-items: flex-start;\n}\n\n.modal-position-bottom {\n  justify-content: center;\n  align-items: flex-end;\n}\n\n.modal-position-left-drawer {\n  justify-content: flex-start;\n  align-items: stretch;\n}\n\n.modal-position-right-drawer {\n  justify-content: flex-end;\n  align-items: stretch;\n}\n\n// ==========================================================\n// Dialog — the modal container\n// ==========================================================\n.brandy-modal-dialog {\n  position: relative;\n  background-color: white;\n  border-radius: 10px;\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n  display: flex;\n  flex-direction: column;\n  width: var(--modal-width, 600px);\n  max-width: 95vw;\n  max-height: var(--modal-max-height, 90vh);\n}\n\n// Drawer overrides — full viewport height, no border radius on connected edge.\n.modal-position-left-drawer .brandy-modal-dialog,\n.modal-position-right-drawer .brandy-modal-dialog {\n  height: 100vh;\n  max-height: 100vh;\n  border-radius: 0;\n}\n\n// Top/bottom — full width bar.\n.modal-position-top .brandy-modal-dialog,\n.modal-position-bottom .brandy-modal-dialog {\n  width: 100%;\n  max-width: 100%;\n  border-radius: 0;\n}\n\n// ==========================================================\n// Modal content\n// ==========================================================\n.brandy-modal-content {\n  width: 100%;\n\n  .block-editor-inner-blocks {\n    width: 100%;\n  }\n}\n\n// ==========================================================\n// Animation variants — applied to .brandy-modal-dialog\n// ==========================================================\n\n// Fade\n.modal-animation-fade .brandy-modal-dialog {\n  opacity: 0;\n  transition: opacity var(--modal-animation-duration, 300ms) ease;\n}\n\n.modal-animation-fade.is-open .brandy-modal-dialog {\n  opacity: 1;\n}\n\n// Scale\n.modal-animation-scale .brandy-modal-dialog {\n  opacity: 0;\n  transform: scale(0.85);\n  transition:\n    opacity var(--modal-animation-duration, 300ms) ease,\n    transform var(--modal-animation-duration, 300ms) ease;\n}\n\n.modal-animation-scale.is-open .brandy-modal-dialog {\n  opacity: 1;\n  transform: scale(1);\n}\n\n// Slide — direction depends on position.\n.modal-animation-slide .brandy-modal-dialog {\n  transition:\n    opacity var(--modal-animation-duration, 300ms) ease,\n    transform var(--modal-animation-duration, 300ms) ease;\n}\n\n// Slide: center — slide up.\n.modal-animation-slide.modal-position-center .brandy-modal-dialog {\n  opacity: 0;\n  transform: translateY(30px);\n}\n\n// Slide: top — slide from top.\n.modal-animation-slide.modal-position-top .brandy-modal-dialog {\n  opacity: 0;\n  transform: translateY(-100%);\n}\n\n// Slide: bottom — slide from bottom.\n.modal-animation-slide.modal-position-bottom .brandy-modal-dialog {\n  opacity: 0;\n  transform: translateY(100%);\n}\n\n// Slide: left drawer — slide from left.\n.modal-animation-slide.modal-position-left-drawer .brandy-modal-dialog {\n  opacity: 0;\n  transform: translateX(-100%);\n}\n\n// Slide: right drawer — slide from right.\n.modal-animation-slide.modal-position-right-drawer .brandy-modal-dialog {\n  opacity: 0;\n  transform: translateX(100%);\n}\n\n// Slide open state — all positions reset to origin.\n.modal-animation-slide.is-open .brandy-modal-dialog {\n  opacity: 1;\n  transform: translate(0, 0);\n}\n\n// None — no animation (backdrop + dialog).\n.modal-animation-none {\n  &, .brandy-modal-dialog {\n    transition: none;\n  }\n}\n\n// ==========================================================\n// Reduced motion — disable all animations\n// ==========================================================\n@media (prefers-reduced-motion: reduce) {\n  .brandy-modal-backdrop,\n  .brandy-modal-dialog {\n    transition: none !important;\n  }\n}\n\n// ==========================================================\n// Close button styles\n// ==========================================================\n.modal-close-button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  z-index: 1001;\n\n  svg {\n    width: 100%;\n    height: 100%;\n    fill: #ffffff;\n    stroke: #333;\n    transition: stroke 0.2s;\n\n    &:hover {\n      stroke: #000;\n    }\n  }\n\n  // Close button positions.\n  &.top-right {\n    top: -10px;\n    right: -10px;\n    transform: translate(50%, -50%);\n  }\n\n  &.top-left {\n    top: -10px;\n    left: -10px;\n    transform: translate(-50%, -50%);\n  }\n\n  &.bottom-right {\n    bottom: -10px;\n    right: -10px;\n    transform: translate(50%, 50%);\n  }\n\n  &.bottom-left {\n    bottom: -10px;\n    left: -10px;\n    transform: translate(-50%, 50%);\n  }\n}\n\n// ==========================================================\n// Editor-specific styles (old class names used in Edit/index.jsx)\n// ==========================================================\n.modal-backdrop {\n  position: fixed;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000;\n  overflow-y: auto;\n  margin: 0 !important;\n  max-width: unset !important;\n}\n\n.modal-wrapper {\n  position: relative;\n}\n\n.modal-content {\n  background-color: white;\n  padding: 20px;\n  border-radius: 10px;\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  width: 100%;\n  overflow-y: auto;\n\n  .block-editor-inner-blocks {\n    width: 100%;\n  }\n\n  // Button appender styles.\n  .brandy-modal-button-appender-wrapper {\n    text-align: right !important;\n\n    .block-editor-button-block-appender {\n      position: absolute;\n      right: 0;\n      bottom: -20px;\n      background: #1e1e1e !important;\n      color: #ffffff !important;\n      flex-direction: row;\n      height: 24px;\n      min-width: 24px;\n      width: 24px;\n      padding: 0 !important;\n\n      &:hover {\n        background: var(--wp-admin-theme-color);\n        color: #fff;\n      }\n    }\n  }\n}\n"],"names":[],"sourceRoot":""}