{"version":3,"file":"./style-index.css","mappings":";;;AAAA;;;EAAA;AAKA;EACC;EACA;EACA;EACG;AAAJ;AAEC;;EAGC;EACA;EACA;EACA;EACA;EACA;AADF;AAGE;;EACC;EACS;EACT;EACA;AAAH;AAGG;EAPD;;IAQE;IACA;IACA;EACF;AACF;AAEE;;EACC;EACA;EACA;AACH;AAGE;;EACC;AAAH;AAGG;EAJD;;IAKE;EACF;AACF;AAEE;;EACU;EACA;EACT;EACA;EACA;EACS;EACA;EACT;EACA;EACA;EACS;AACZ;AACY;;EACR;AAEJ;AAMM;;;EAIH;AALH;AAQG;EAPG;;;IAQF;IACA;IACA;OAAA;EAHF;AACF;AAQC;EAEC;AAPF;AAUE;EACC;AARH;AAYC;EAEC;EACA;AAXF;AAeC;EAEE;IAEC;IACA;EAfF;EAYC;IAEC;IACA;EAXF;EAQC;IAEC;IACA;EAPF;EAIC;IAEC;IACA;EAHF;EAAC;IAEC;IACA;EACF;EAJC;IAEC;IACA;EAKF;EACC;IAEC;EAAF;EAFC;IAEC;EAGF;EALC;IAEC;EAMF;EARC;IAEC;EASF;EAXC;IAEC;EAYF;EAdC;IAEC;EAeF;EAjBC;IAEC;EAkBF;EApBC;IAEC;EAqBF;AACF;AAfC;;EAMC;AAaF;AAPE;EACC;AASH;AAJC;EAEC;EACA;AAKF;AAAC;EAGC;AAAF;AAKE;EACC;AAHH,C","sources":["webpack://oacs-image-slider-blocks/./src/style.scss"],"sourcesContent":["/**\n * The following styles get applied both on the front of your site\n * and in the editor.\n */\n\n.wp-block-oacs-slider {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tlist-style-type: none;\n    padding: 0;\n    \n\t.blocks-gallery-image,\n\t.blocks-gallery-item {\n\t\t// Add space between thumbnails, and unset right most thumbnails later.\n\t\tmargin: 0 0 8px 0;\n\t\tdisplay: flex;\n\t\tflex-grow: 1;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tposition: relative;\n\n\t\tfigure {\n\t\t\tmargin: 0;\n            height: 100%;\n\t\t\tmargin: auto;\n\t\t\tposition: relative;\n            \n\t\t\t// IE doesn't support flex so omit that.\n\t\t\t@supports (position: sticky) {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: flex-end;\n\t\t\t\tjustify-content: flex-start;\n            }\n        }\n\n\t\timg {\n\t\t\tdisplay: block;\n\t\t\tmax-width: 100%;\n\t\t\theight: auto;\n\t\t}\n\n        // IE doesn't handle cropping, so we need an explicit width here.\n\t\timg {\n\t\t\twidth: 100%;\n\n\t\t\t// IE11 doesn't read rules inside this query. They are applied only to modern browsers.\n\t\t\t@supports (position: sticky) {\n\t\t\t\twidth: auto;\n\t\t\t}\n        }\n        \n\t\tfigcaption {\n            position: absolute;\n            bottom: 0;\n\t\t\tright: 0;\n\t\t\tleft: 0;\n\t\t\tmax-height: 100%;\n            overflow: auto;\n            padding: 40px 10px 5px;\n\t\t\tcolor: #fff;\n\t\t\ttext-align: center;\n\t\t\tfont-size: 13px;\n            background: linear-gradient(0deg, rgba( $color: #000, $alpha: 0.7 ) 0, rgba($color: #000, $alpha: 0.3) 60%, transparent);\n            \n            img {\n\t\t\t\tdisplay: inline;\n\t\t\t}\n\t\t}\n\t}\n\n\t// Cropped\n\t&.is-cropped .blocks-gallery-image,\n\t&.is-cropped .blocks-gallery-item {\n      a,\n      img {\n\t\t\t// IE11 doesn't support object-fit, so just make sure images aren't skewed.\n\t\t\t// The following rules are for all browsers.\n\t\t\twidth: 100%;\n\n\t\t\t// IE11 doesn't read rules inside this query. They are applied only to modern browsers.\n\t\t\t@supports (position: sticky) {\n\t\t\t\theight: 100%;\n\t\t\t\tflex: 1;\n\t\t\t\tobject-fit: cover;\n            }\n        }\n\t}\n\n\t// On mobile and responsive viewports, we allow only 1 or 2 columns at the most.\n\t& .blocks-gallery-image,\n\t& .blocks-gallery-item {\n\t\twidth: calc(100% / 2);\n\t\t// width: calc(100% / 2 - 8px);\n        \n\t\t&:nth-of-type(even) {\n\t\t\tmargin-right: 0;\n\t\t}\n\t}\n\n\t&.columns-1 .blocks-gallery-image,\n\t&.columns-1 .blocks-gallery-item {\n\t\twidth: 100%;\n\t\tmargin-right: 0;\n\t}\n\n\t// Beyond mobile viewports, we allow up to 8 columns.\n\t@media (min-width:600px) {\n\t\t@for $i from 3 through 8 {\n\t\t\t&.columns-#{ $i } .blocks-gallery-image,\n\t\t\t&.columns-#{ $i } .blocks-gallery-item {\n\t\t\t\twidth: calc((100% - 16px * #{ $i - 1 }) / #{ $i });\n\t\t\t\tmargin-right: 16px;\n\t\t\t}\n\t\t}\n\n\t\t// Unset the right margin on every rightmost gallery item to ensure center balance.\n\t\t@for $column-count from 1 through 8 {\n\t\t\t&.columns-#{ $column-count } .blocks-gallery-image:nth-of-type(#{ $column-count }n),\n\t\t\t&.columns-#{ $column-count } .blocks-gallery-item:nth-of-type(#{ $column-count }n) {\n\t\t\t\tmargin-right: 0;\n\t\t\t}\n\t\t}\n\t}\n\n\t// Last item always needs margins reset.\n\t// When block is selected, only reset the right margin of the 2nd to last item.\n\t.blocks-gallery-image:last-child,\n\t.blocks-gallery-item:last-child,\n\t.is-selected & .blocks-gallery-image:nth-last-child(2),\n\t.is-selected & .blocks-gallery-item:nth-last-child(2),\n\t.is-typing & .blocks-gallery-image:nth-last-child(2),\n\t.is-typing & .blocks-gallery-item:nth-last-child(2) {\n\t\tmargin-right: 0;\n\t}\n\n    // Make the \"Add new Gallery item\" button full-width (so it always appears\n\t// below other items).\n\t.blocks-gallery-item {\n\t\t&.has-add-item-button {\n\t\t\twidth: 100%;\n\t\t}\n    }\n    \n\t// Apply max-width to floated items that have no intrinsic width.\n\t&.alignleft,\n\t&.alignright {\n\t\tmax-width: 636px / 2;\n\t\twidth: 100%;\n    }\n    \n    // Keep the display property consistent when alignments are applied\n\t// to preserve columns\n\t&.alignleft,\n\t&.aligncenter,\n\t&.alignright {\n\t\tdisplay: flex;\n\t}\n\n\t// If the gallery is centered, center the content inside as well.\n\t&.aligncenter {\n\t\t.blocks-gallery-item figure {\n\t\t\tjustify-content: center;\n\t\t}\n\t}\n}\n"],"names":[],"sourceRoot":""}