@total_onion/onion-library 3.2.0 → 3.2.2

package/public/block-cocktail-recipe-v3/cocktail-recipe-v3.css

@@ -0,0 +1,268 @@
+@layer base-styles {
+  .cocktail-recipe-v3 {
+    pointer-events: all;
+  }
+  .cocktail-recipe-v3__ingredients-container {
+    display: flex;
+    flex-direction: column;
+    gap: calc(20 / var(--design-reference) * var(--screen-width));
+    padding-bottom: calc(50 / var(--design-reference) * var(--screen-width));
+  }
+  .cocktail-recipe-v3__ingredients-container .ingredients-title {
+    padding-block: calc(10 / var(--design-reference) * var(--screen-width));
+    font-family: var(--primary-font-family);
+    font-size: calc(80 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+    font-weight: 500;
+    text-transform: uppercase;
+    text-box-edge: cap alphabetic;
+    text-box-trim: trim-both;
+  }
+  @media screen and (min-width: 768px) {
+    .cocktail-recipe-v3__ingredients-container .ingredients-title {
+      font-size: calc(160 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+    }
+  }
+  .cocktail-recipe-v3__servings {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-block: calc(15 / var(--design-reference) * var(--screen-width));
+    border-bottom: 1px solid rgba(250, 248, 236, 0.3019607843);
+  }
+  .cocktail-recipe-v3__servings .servings-title {
+    font-family: var(--secondary-font-family);
+    font-size: calc(26 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+    font-weight: 500;
+  }
+  .cocktail-recipe-v3__servings .servings-control-wrapper {
+    display: flex;
+    align-items: center;
+    gap: calc(15 / var(--design-reference) * var(--screen-width));
+  }
+  .cocktail-recipe-v3__servings .servings-control-wrapper .dec-btn-wrapper {
+    width: 40px;
+    height: 40px;
+    border: 1px solid #faf8ec;
+    overflow: hidden;
+  }
+  .cocktail-recipe-v3__servings .servings-control-wrapper .dec-btn-wrapper:hover .servings-dec-btn {
+    transform: translateX(-100%);
+  }
+  .cocktail-recipe-v3__servings .servings-control-wrapper .dec-btn-wrapper.inactive {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+  .cocktail-recipe-v3__servings .servings-control-wrapper .servings-current {
+    font-family: var(--secondary-font-family);
+    font-size: calc(26 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+    font-weight: 500;
+    display: inline-block;
+    width: calc(60 / var(--design-reference) * var(--screen-width));
+    text-align: center;
+  }
+  @media screen and (min-width: 768px) {
+    .cocktail-recipe-v3__servings .servings-control-wrapper .servings-current {
+      font-size: calc(30 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+    }
+  }
+  .cocktail-recipe-v3__servings .servings-control-wrapper .inc-btn-wrapper {
+    cursor: pointer;
+    width: 40px;
+    height: 40px;
+    border: 1px solid #faf8ec;
+    overflow: hidden;
+  }
+  .cocktail-recipe-v3__servings .servings-control-wrapper .inc-btn-wrapper:hover .servings-inc-btn {
+    transform: translateX(0);
+  }
+  .cocktail-recipe-v3__unit-toggle {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: calc(10 / var(--design-reference) * var(--screen-width));
+  }
+  .cocktail-recipe-v3__unit-toggle .unit-text {
+    font-family: var(--tertiary-font-family);
+    font-size: calc(18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+    font-weight: 700;
+  }
+  @media screen and (min-width: 768px) {
+    .cocktail-recipe-v3__unit-toggle .unit-text {
+      font-size: calc(22 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+    }
+  }
+  .cocktail-recipe-v3__unit-toggle .unit-toggle-wrapper {
+    display: flex;
+    align-items: center;
+    gap: calc(20 / var(--design-reference) * var(--screen-width));
+  }
+  .cocktail-recipe-v3__unit-toggle .unit-toggle-wrapper .checkbox-wrapper input[type=checkbox] {
+    display: none;
+    visibility: hidden;
+  }
+  .cocktail-recipe-v3__unit-toggle .unit-toggle-wrapper .checkbox-wrapper .block {
+    position: relative;
+    clear: both;
+    float: left;
+  }
+  .cocktail-recipe-v3__unit-toggle .unit-toggle-wrapper .checkbox-wrapper label {
+    width: 64px;
+    height: 36px;
+    box-sizing: border-box;
+    border: 1px solid;
+    float: left;
+    border-radius: 100px;
+    position: relative;
+    cursor: pointer;
+    transition: 0.3s ease;
+    color: #faf8ec;
+  }
+  .cocktail-recipe-v3__unit-toggle .unit-toggle-wrapper .checkbox-wrapper input[type=checkbox]:checked + label:before {
+    left: 31px;
+  }
+  .cocktail-recipe-v3__unit-toggle .unit-toggle-wrapper .checkbox-wrapper label:before {
+    transition: 0.3s ease;
+    content: "";
+    width: 28px;
+    height: 28px;
+    position: absolute;
+    background: #faf8ec;
+    left: 3px;
+    top: 3px;
+    box-sizing: border-box;
+    color: black;
+    border-radius: 50%;
+  }
+  .cocktail-recipe-v3 .ingredients-wrapper {
+    display: flex;
+    align-items: center;
+    gap: calc(15 / var(--design-reference) * var(--screen-width));
+  }
+  @media screen and (min-width: 768px) {
+    .cocktail-recipe-v3 .ingredients-wrapper {
+      gap: calc(30 / var(--design-reference) * var(--screen-width));
+    }
+  }
+  .cocktail-recipe-v3 .ingredients-wrapper .ingredient-image {
+    max-width: calc(50 / var(--design-reference) * var(--screen-width));
+    aspect-ratio: 1;
+    -o-object-fit: cover;
+    object-fit: cover;
+  }
+  @media screen and (min-width: 768px) {
+    .cocktail-recipe-v3 .ingredients-wrapper .ingredient-image {
+      max-width: calc(100 / var(--design-reference) * var(--screen-width));
+    }
+  }
+  .cocktail-recipe-v3 .ingredients-wrapper .ingredient-text {
+    font-size: calc(18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+    font-family: var(--tertiary-font-family);
+    font-weight: 400;
+  }
+  @media screen and (min-width: 768px) {
+    .cocktail-recipe-v3 .ingredients-wrapper .ingredient-text {
+      font-size: calc(22 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+    }
+  }
+  .cocktail-recipe-v3__equipment-container {
+    display: flex;
+    flex-direction: column;
+    gap: calc(20 / var(--design-reference) * var(--screen-width));
+    padding-bottom: calc(100 / var(--design-reference) * var(--screen-width));
+  }
+  @media screen and (min-width: 768px) {
+    .cocktail-recipe-v3__equipment-container {
+      padding-bottom: calc(180 / var(--design-reference) * var(--screen-width));
+    }
+  }
+  .cocktail-recipe-v3__equipment-container .equipments-title {
+    font-family: var(--secondary-font-family);
+    font-size: calc(26 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+    font-weight: 500;
+    padding-block: calc(20 / var(--design-reference) * var(--screen-width));
+    border-bottom: 1px solid rgba(250, 248, 236, 0.3019607843);
+  }
+  @media screen and (min-width: 768px) {
+    .cocktail-recipe-v3__equipment-container .equipments-title {
+      padding-block: calc(10 / var(--design-reference) * var(--screen-width));
+    }
+  }
+  .cocktail-recipe-v3__equipment-container .equipments-wrapper {
+    display: flex;
+    align-items: center;
+    gap: calc(15 / var(--design-reference) * var(--screen-width));
+  }
+  @media screen and (min-width: 768px) {
+    .cocktail-recipe-v3__equipment-container .equipments-wrapper {
+      gap: calc(30 / var(--design-reference) * var(--screen-width));
+    }
+  }
+  .cocktail-recipe-v3__equipment-container .equipments-wrapper .equipment-image {
+    max-width: calc(50 / var(--design-reference) * var(--screen-width));
+    aspect-ratio: 1;
+    -o-object-fit: cover;
+    object-fit: cover;
+  }
+  @media screen and (min-width: 768px) {
+    .cocktail-recipe-v3__equipment-container .equipments-wrapper .equipment-image {
+      max-width: calc(100 / var(--design-reference) * var(--screen-width));
+    }
+  }
+  .cocktail-recipe-v3__equipment-container .equipments-wrapper .equipment-text {
+    font-family: var(--tertiary-font-family);
+    font-size: calc(18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+    font-weight: 400;
+  }
+  @media screen and (min-width: 768px) {
+    .cocktail-recipe-v3__equipment-container .equipments-wrapper .equipment-text {
+      font-size: calc(22 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+    }
+  }
+  .cocktail-recipe-v3__instructions-container .instructions-title {
+    font-family: var(--primary-font-family);
+    font-size: calc(70 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+    font-weight: 500;
+    text-transform: uppercase;
+    padding-block: calc(10 / var(--design-reference) * var(--screen-width));
+    text-box-edge: cap alphabetic;
+    text-box-trim: trim-both;
+  }
+  @media screen and (min-width: 768px) {
+    .cocktail-recipe-v3__instructions-container .instructions-title {
+      padding-block: calc(40 / var(--design-reference) * var(--screen-width));
+      font-size: calc(160 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+    }
+  }
+  .cocktail-recipe-v3__instructions-container .instructions-wrapper {
+    display: flex;
+    align-items: flex-start;
+    gap: calc(20 / var(--design-reference) * var(--screen-width));
+    padding-block: calc(30 / var(--design-reference) * var(--screen-width));
+    border-top: 1px solid rgba(250, 248, 236, 0.3019607843);
+  }
+  @media screen and (min-width: 768px) {
+    .cocktail-recipe-v3__instructions-container .instructions-wrapper {
+      align-items: center;
+    }
+  }
+  .cocktail-recipe-v3__instructions-container .instructions-wrapper .instructions-number {
+    font-family: var(--secondary-font-family);
+    font-size: calc(30 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+    padding-inline: calc(10 / var(--design-reference) * var(--screen-width));
+    font-weight: 500;
+    text-box-trim: trim-both;
+    text-box-edge: cap alphabetic;
+  }
+  .cocktail-recipe-v3__instructions-container .instructions-wrapper .instructions-text {
+    font-family: var(--tertiary-font-family);
+    font-size: calc(24 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+    font-weight: 300;
+    text-box-trim: trim-both;
+    text-box-edge: cap alphabetic;
+  }
+  @media screen and (min-width: 768px) {
+    .cocktail-recipe-v3__instructions-container .instructions-wrapper .instructions-text {
+      font-size: calc(30 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+    }
+  }
+}

package/public/block-cocktail-recipe-v3/cocktail-recipe-v3.js

@@ -0,0 +1,95 @@
+export default function cocktailrecipev3Js(options = {}) {
+  try {
+    const { block } = options;
+    const valueEl = block.querySelector("[data-servings-value]");
+    const decBtn = block.querySelector("[data-servings-dec]");
+    const incBtn = block.querySelector("[data-servings-inc]");
+    const decWrapper = block.querySelector(".dec-btn-wrapper");
+    const amountEls = block.querySelectorAll("[data-ingredients]");
+    const unitToggle = document.querySelector("[data-unit-toggle]");
+    const checkbox = unitToggle?.querySelector("[data-unit-checkbox]");
+    amountEls.forEach((el) => {
+      if (!el.dataset.baseAmount) {
+        el.dataset.baseAmount = el.dataset.amount || "";
+      }
+      if (!el.dataset.baseUnit) {
+        el.dataset.baseUnit = el.dataset.unit || "";
+      }
+    });
+    let currentUnit = "ml";
+    const ML_TO_OZ = 0.033814;
+    const getServings = () => parseInt(valueEl.textContent, 10) || 1;
+    const setServings = (n) => {
+      valueEl.textContent = `${n}x`;
+      updateInactiveState(n);
+    };
+    const updateInactiveState = (value) => {
+      if (!decWrapper) return;
+      if (value <= 1) decWrapper.classList.add("inactive");
+      else decWrapper.classList.remove("inactive");
+    };
+    const formatNumber = (num, unit) => {
+      if (unit === "oz")
+        return (Math.round(num * 100) / 100).toFixed(2).replace(/\.?0+$/, "");
+      if (unit === "ml")
+        return (Math.round(num * 10) / 10).toString().replace(/\.0$/, "");
+      if (unit === "cl")
+        return (Math.round(num * 100) / 100).toString().replace(/\.0$/, "");
+      return (Math.round(num * 100) / 100).toString().replace(/\.?0+$/, "");
+    };
+    const convert = (value, fromUnit, toUnit) => {
+      if (isNaN(value)) return value;
+      if (fromUnit === toUnit) return value;
+      if (fromUnit === "ml" && toUnit === "oz") return value * ML_TO_OZ;
+      if (fromUnit === "oz" && toUnit === "ml") return value / ML_TO_OZ;
+      return value;
+    };
+    const renderIngredients = () => {
+      const servings = getServings();
+      amountEls.forEach((el) => {
+        const baseAmount = parseFloat(el.dataset.baseAmount);
+        const baseUnit = el.dataset.baseUnit || "";
+        const name = el.dataset.name || "";
+        if (isNaN(baseAmount)) {
+          el.textContent = name;
+          return;
+        }
+        let amount = baseAmount * servings;
+        let displayUnit = baseUnit;
+        if ((baseUnit === "ml" || baseUnit === "oz") && currentUnit !== baseUnit) {
+          amount = convert(amount, baseUnit, currentUnit);
+          displayUnit = currentUnit;
+        }
+        const numStr = formatNumber(amount, displayUnit);
+        const unitStr = displayUnit ? displayUnit : "";
+        el.textContent = `${numStr}${unitStr ? unitStr : ""}${unitStr ? " " : " "}${name}`.trim();
+      });
+    };
+    decBtn?.addEventListener("click", () => {
+      const cur = getServings();
+      if (cur > 1) {
+        setServings(cur - 1);
+        renderIngredients();
+      }
+    });
+    incBtn?.addEventListener("click", () => {
+      const cur = getServings();
+      if (cur < 99) {
+        setServings(cur + 1);
+        renderIngredients();
+      }
+    });
+    if (checkbox) {
+      checkbox.addEventListener("change", (e) => {
+        currentUnit = e.target.checked ? "oz" : "ml";
+        renderIngredients();
+      });
+    }
+    setServings(getServings() || 1);
+    currentUnit = "ml";
+    renderIngredients();
+    updateInactiveState(getServings());
+  } catch (error) {
+    console.error(error);
+  }
+}

package/public/block-cover-link-v3/cover-link-v3.css

@@ -0,0 +1,8 @@
+@layer base-styles {
+  .cover-link-v3__link {
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+    pointer-events: all;
+  }
+}

package/public/block-cover-link-v3/cover-link-v3.js

@@ -0,0 +1,7 @@
+export default function coverlinkv3Js(options = {}) {
+  try {
+    const { block } = options;
+  } catch (error) {
+    console.error(error);
+  }
+}

package/public/block-divider-v3/divider-v3.css

@@ -0,0 +1,74 @@
+@layer base-styles {
+  .divider-v3 {
+    display: grid;
+    display: var(--display-mobile, grid);
+  }
+  @media screen and (min-width: 768px) {
+    .divider-v3 {
+      display: grid;
+      display: var(--display-portrait, grid);
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    .divider-v3 {
+      display: grid;
+      display: var(--display-desktop, grid);
+    }
+  }
+  .divider-v3.vertical {
+    height: 100%;
+  }
+  .divider-v3.vertical .divider-v3__line {
+    height: 100%;
+  }
+  @media screen and (min-width: 768px) {
+    .divider-v3.vertical .divider-v3__line {
+      height: 100%;
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    .divider-v3.vertical .divider-v3__line {
+      height: 100%;
+    }
+  }
+  .divider-v3.horizontal .divider-v3__line {
+    width: 100%;
+  }
+  @media screen and (min-width: 768px) {
+    .divider-v3.horizontal .divider-v3__line {
+      width: 100%;
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    .divider-v3.horizontal .divider-v3__line {
+      width: 100%;
+    }
+  }
+  .divider-v3__line {
+    background-color: var(--divider-v3-background-colour);
+    background-image: var(--divider-v3-background-image);
+    background-repeat: var(--divider-v3-background-repeat);
+    background-position: var(--divider-v3-background-position-x) var(--divider-v3-background-position-y);
+    width: calc(var(--divider-v3-width) / var(--design-reference) * var(--screen-width));
+    height: calc(var(--divider-v3-height) / var(--design-reference) * var(--screen-width));
+    place-self: var(--divider-v3-vertical-position) var(--divider-v3-horizontal-position);
+    max-width: calc(var(--divider-v3-max-width-mobile) / var(--design-reference) * var(--screen-width));
+    max-height: calc(var(--divider-v3-max-height-mobile) / var(--design-reference) * var(--screen-width));
+  }
+  @media screen and (min-width: 768px) {
+    .divider-v3__line {
+      height: calc(var(--divider-v3-height) / var(--design-reference) * var(--screen-width));
+      width: calc(var(--divider-v3-width) / var(--design-reference) * var(--screen-width));
+      max-width: calc(var(--divider-v3-max-width-portrait) / var(--design-reference) * var(--screen-width));
+      max-height: calc(var(--divider-v3-max-height-portrait) / var(--design-reference) * var(--screen-width));
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    .divider-v3__line {
+      height: calc(var(--divider-v3-height) / var(--design-reference) * var(--screen-width));
+      width: calc(var(--divider-v3-width) / var(--design-reference) * var(--screen-width));
+      max-width: calc(var(--divider-v3-max-width-desktop) / var(--design-reference) * var(--screen-width));
+      max-height: calc(var(--divider-v3-max-height-desktop) / var(--design-reference) * var(--screen-width));
+    }
+  }
+}

package/public/block-divider-v3/divider-v3.js

@@ -0,0 +1,7 @@
+export default function dividerv3Js(options = {}) {
+  try {
+    const { block } = options;
+  } catch (error) {
+    console.error(error);
+  }
+}

package/public/block-featured-image-gallery-v3/featured-image-gallery-v3.css

@@ -0,0 +1,98 @@
+@layer base-styles {
+  .featured-image-gallery-v3 {
+    display: grid;
+    grid-template: "featured" "other"/1fr;
+    grid-gap: calc(10 / var(--design-reference) * var(--screen-width));
+    gap: calc(10 / var(--design-reference) * var(--screen-width));
+  }
+  @media screen and (min-width: 768px) {
+    .featured-image-gallery-v3 {
+      grid-template: "featured other"/1fr 1fr;
+      grid-gap: calc(20 / var(--design-reference) * var(--screen-width));
+    }
+  }
+  .featured-image-gallery-v3__featured-image-container {
+    perspective: 1000px;
+    grid-area: featured;
+    place-self: stretch;
+    aspect-ratio: 1;
+  }
+  .featured-image-gallery-v3__featured-image-container.changing-image .featured-image-gallery-v3__featured-image-inner-container {
+    transform: rotateY(180deg);
+  }
+  .featured-image-gallery-v3__featured-image-inner-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    transition: transform 0.8s;
+    transform-style: preserve-3d;
+  }
+  .featured-image-gallery-v3__featured-image-front,
+  .featured-image-gallery-v3__featured-image-back {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden;
+  }
+  .featured-image-gallery-v3__featured-image-front {
+    background-color: var(--bally-blue-dark);
+  }
+  .featured-image-gallery-v3__featured-image-back {
+    display: grid;
+    place-items: center;
+    background-color: var(--bally-blue-dark);
+    transform: rotateY(180deg);
+    padding: calc(20 / var(--design-reference) * var(--screen-width));
+  }
+  @media screen and (min-width: 768px) {
+    .featured-image-gallery-v3__featured-image-back {
+      padding: calc(120 / var(--design-reference) * var(--screen-width));
+    }
+  }
+  .featured-image-gallery-v3__featured-image {
+    grid-area: featured;
+    -o-object-fit: cover;
+    object-fit: cover;
+    aspect-ratio: 1;
+  }
+  @media screen and (min-width: 768px) {
+    .featured-image-gallery-v3__featured-image {
+      width: 100%;
+      height: auto;
+    }
+  }
+  .featured-image-gallery-v3__other-images {
+    grid-area: other;
+    place-self: stretch;
+    display: grid;
+    aspect-ratio: 1;
+    grid-gap: calc(8 / var(--design-reference) * var(--screen-width));
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+  }
+  @media screen and (min-width: 768px) {
+    .featured-image-gallery-v3__other-images {
+      grid-gap: calc(10 / var(--design-reference) * var(--screen-width));
+    }
+  }
+  .featured-image-gallery-v3__image-wrapper {
+    display: flex;
+    overflow: hidden;
+    box-shadow: 0px 0px 8px transparent;
+    transition: box-shadow 0.2s;
+    cursor: pointer;
+  }
+  .featured-image-gallery-v3__image-wrapper:hover,
+  .featured-image-gallery-v3__image-wrapper--active {
+    box-shadow: 0px 0px 0px calc(2 / var(--design-reference) * var(--screen-width)) white;
+  }
+  .featured-image-gallery-v3__image {
+    -o-object-fit: cover;
+    object-fit: cover;
+    aspect-ratio: 1;
+    width: 100%;
+    height: auto;
+    transition: transform 0.5s ease-out;
+  }
+}

package/public/block-featured-image-gallery-v3/featured-image-gallery-v3.js

@@ -0,0 +1,44 @@
+export default function featuredImagegalleryJs(options = {}) {
+  try {
+    const { block } = options;
+    const featuredImageContainer = block.querySelector(
+      `.featured-image-gallery-v3__featured-image-container`
+    );
+    const featuredImage = block.querySelector(
+      `.featured-image-gallery-v3__featured-image`
+    );
+    const thumbnailImages = block.querySelectorAll(
+      `.featured-image-gallery-v3__image-wrapper`
+    );
+    thumbnailImages.forEach((image) => {
+      image.addEventListener("click", function updateSrc() {
+        thumbnailImages.forEach((wrapper) => {
+          wrapper.classList.remove(
+            "featured-image-gallery-v3__image-wrapper--active"
+          );
+        });
+        image.classList.add(
+          "featured-image-gallery-v3__image-wrapper--active"
+        );
+        featuredImageContainer.classList.add("changing-image");
+        setTimeout(() => {
+          featuredImage.setAttribute(
+            "src",
+            this.querySelector("img").getAttribute("src")
+          );
+          featuredImage.setAttribute(
+            "alt",
+            this.querySelector("img").getAttribute("alt")
+          );
+          featuredImage.setAttribute(
+            "srcset",
+            this.querySelector("img").getAttribute("srcset")
+          );
+          featuredImageContainer.classList.remove("changing-image");
+        }, 800);
+      });
+    });
+  } catch (error) {
+    console.error(error);
+  }
+}

package/public/block-form-selection-v3/form-selection-v3.css

@@ -0,0 +1,31 @@
+@layer base-styles {
+  .form-selection-v3 {
+    pointer-events: all;
+  }
+  .form-selection-v3__container-modal {
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: 9998;
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+  .form-selection-v3__inner {
+    overflow-y: scroll;
+    width: 100vw;
+    z-index: 9999;
+    height: 100%;
+  }
+  .form-selection-v3__modal-open--icon {
+    cursor: pointer;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border: none;
+    background: transparent;
+  }
+  .form-selection-v3__modal-close {
+    position: absolute;
+    top: calc(20 / var(--design-reference) * var(--screen-width));
+    right: calc(20 / var(--design-reference) * var(--screen-width));
+  }
+}