@yoobic/yobi 8.1.0-39 → 8.1.0-43

package/dist/collection/components/form/form-image-map/form-image-map.css

@@ -0,0 +1,807 @@
+:root {
+  --ease-in-back: cubic-bezier(0.36, 0, 0.66, -0.56);
+  --ease-in-circ: cubic-bezier(0.55, 0, 1, 0.45);
+  --ease-in-cubic: cubic-bezier(0.32, 0, 0.67, 0);
+  --ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);
+  --ease-in-quad: cubic-bezier(0.11, 0, 0.5, 0);
+  --ease-in-quart: cubic-bezier(0.5, 0, 0.75, 0);
+  --ease-in-quint: cubic-bezier(0.64, 0, 0.78, 0);
+  --ease-in-sine: cubic-bezier(0.12, 0, 0.39, 0);
+  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-out-circ: cubic-bezier(0, 0.55, 0.45, 1);
+  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
+  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-out-quad: cubic-bezier(0.5, 1, 0.89, 1);
+  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
+  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-out-sine: cubic-bezier(0.61, 1, 0.88, 1);
+  --ease-in-out-back: cubic-bezier(0.68, -0.6, 0.32, 1.6);
+  --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
+  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
+  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
+  --ease-in-out-quad: cubic-bezier(0.45, 0, 0.55, 1);
+  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
+  --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
+  --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);
+}
+
+/* app direction */
+/* border-radius */
+/* border-width */
+/* font family */
+/* font-size */
+/* font weights */
+/* icon size */
+/* used for logos */
+/* spacing for padding, margin, etc... */
+/* shadow */
+/* Z-Index (Ionic)
+--------------------------------------------------
+Grouped by elements which would be siblings */
+/* Hairlines width */
+/* Default Colors
+---------------------------------- */
+/* Private color variables */
+/* #3880ff; */
+/* #3880ff; */
+/* #3880ff; */
+/* #3880ff; */
+/* #3880ff;*/
+/* #3880ff; */
+/* #3880ff; */
+/* #3880ff; */
+/* #3880ff; */
+/* Color map should provide
+- base: main color to be used.
+- contrast: Color that will provide readable text against the base color
+- shade: 12% darker version of the base color (mix with black)
+- tint: 10% lighter version of the base color (mix with white) */
+/* Themed Colors
+
+ Default Foreground and Background Colors values
+ Allows users to override an foreground / background colors
+ $background-color-value:            $light !default;
+ $background-color-rgb:              255, 255, 255 !default; */
+/* Default Foreground and Background Colors
+-------------------------------------------------- */
+/* Default General Colors
+-------------------------------------------------- */
+/* Default List & List Items
+-------------------------------------------------- */
+/* Item Divider */
+/* iOS List & List Items
+-------------------------------------------------- */
+/* Default Toolbar
+--------------------------------------------------*/
+/* iOS Toolbar
+--------------------------------------------------*/
+/* Default Tabs & Tab bar
+--------------------------------------------------*/
+/* iOS Tabs & Tab bar
+--------------------------------------------------*/
+/* Function related variables
+--------------------------------------------------*/
+/* Gets the active color's css variable from a variation. Alpha is optional.
+--------------------------------------------------------------------------------------------
+Example usage:
+current-color(base) => var(--ion-color-base)
+current-color(contrast, 0.1) => rgba(var(--ion-color-contrast-rgb), 0.1)
+--------------------------------------------------------------------------------------------*/
+/* Gets the specific color's css variable from the name and variation. Alpha/rgb are optional.
+--------------------------------------------------------------------------------------------
+Example usage:
+ion-color(primary, base) => var(--ion-color-primary, #3880ff)
+ion-color(secondary, contrast) => var(--ion-color-secondary-contrast)
+ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5)
+--------------------------------------------------------------------------------------------*/
+/* Mixes a color with black to create its shade.
+--------------------------------------------------------------------------------------------*/
+/*Mixes a color with white to create its tint.
+--------------------------------------------------------------------------------------------*/
+/* Converts a color to a comma separated rgb.
+--------------------------------------------------------------------------------------------*/
+/* Str functions.
+___________________________________________________________________________________________*/
+/* Creates a pulse animation.
+  @param {color} $begin-color [stable-20] - starting color for pulse.
+  @param {color} $end-color [stable-20] - ending color for pulse.
+  @author Ben Morgan
+  @author Damien Arondel 
+*/
+/* Execute a content if the hover state is supported.
+
+ @content the content to execute if relevant
+ @author Ben Morgan
+ @author Damien Arondel
+*/
+/* Properly hide overflow on rounded corner elements for Webkit based browsers.
+ This mixin must be used at the same level as `overflow: hidden` and `border-radius: ...`.
+
+ @link https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7
+ @author Ben Morgan
+ @author Damien Arondel
+*/
+/* Truncate every overflown elements with an ellipsis.
+ This mixin does not work with flex box on the same level.
+
+ @author Ben Morgan
+ @author Damien Arondel
+*/
+/* Truncate text at a specific number of lines.
+ */
+/* app direction */
+/* border-radius */
+/* border-width */
+/* font family */
+/* font-size */
+/* font weights */
+/* icon size */
+/* used for logos */
+/* spacing for padding, margin, etc... */
+/* shadow */
+/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
+/* Single side border-radius */
+/* Text Direction - ltr / rtl
+$app-direction: multi | rtl | ltr | null (default)
+multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.
+rtl: Always assumes rtl and only includes rtl css. No [dir] selectors.
+ltr: Always assumes ltr and only includes ltr css. No [dir] selectors.
+null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override ltr defaults.
+---------------------------------------------------------- */
+/* Add property horizontal
+ @param {string} $start
+ @param {string} $end
+----------------------------------------------------------*/
+/* Add property for all directions
+  @param {string} $prop
+  @param {string} $top
+  @param {string} $end
+  @param {string} $bottom
+  @param {string} $start
+  @param {boolean} $content include content or use default
+----------------------------------------------------------*/
+/* Add margin for all directions
+  @param {string} $top
+  @param {string} $end
+  @param {string} $bottom
+  @param {string} $start
+----------------------------------------------------------*/
+/* Add padding for all directions
+  @param {string} $top
+  @param {string} $end
+  @param {string} $bottom
+  @param {string} $start
+----------------------------------------------------------*/
+/*Font smoothing
+--------------------------------------------------*/
+/* SVG Background Image Mixin
+  @param {string} $svg
+----------------------------------------------------------*/
+/* Add padding horizontal
+  @param {string} $start
+  @param {string} $end
+----------------------------------------------------------*/
+/* Add margin horizontal
+ @param {string} $start
+ @param {string} $end
+----------------------------------------------------------*/
+/* Add safe area padding horizontal
+  @param {string} $start
+  @param {string} $end
+----------------------------------------------------------*/
+/* Add border radius for all directions
+  @param {string} $top-start
+  @param {string} $top-end
+  @param {string} $bottom-end
+  @param {string} $bottom-start
+----------------------------------------------------------*/
+/* Sets correct text align with support for old browsers
+  @param {string} $direction - text direction
+  @param {string} $decorator - !important
+----------------------------------------------------------*/
+/* Add position for all directions
+  @param {string} $top
+  @param {string} $end
+  @param {string} $bottom
+  @param {string} $start
+----------------------------------------------------------*/
+/* Add position horizontal
+  @param {string} $start - amount to position start
+  @param {string} $end - amount to left: 0; end
+----------------------------------------------------------*/
+/**
+ * NOTE DO NOT USE FOR NEW COMPONENTS
+ * LEGACY CODE -- Styles maintained only to prevent breaking changes
+ * For all Font Sizes please use the appropreate font-size-XX Variables.
+ */
+/**
+* Global style mixin for being able to change the background / font-color and border-color
+* programmatically using global classes
+*/
+.tippy-box,
+.tippy-popper {
+  line-height: 1;
+  white-space: pre-wrap;
+}
+.tippy-box .tippy-tooltip,
+.tippy-popper .tippy-tooltip {
+  padding: var(--spacing-02, 0.125rem);
+}
+
+.tippy-box {
+  box-shadow: var(--shadow-03, 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1));
+}
+.tippy-box .tippy-content.editable {
+  padding: 0;
+}
+.tippy-box .tippy-content .flex {
+  display: flex;
+  justify-content: space-around;
+}
+.tippy-box .tippy-content .hidden {
+  display: none;
+}
+.tippy-box .tippy-content .editable-content {
+  display: flex;
+  align-items: center;
+  color: var(--dark, #000000);
+}
+.tippy-box .tippy-content .editable-content .text-content {
+  min-width: 5rem;
+  user-select: text;
+}
+.tippy-box .tippy-content .editable-content .text-content > div {
+  user-select: text;
+}
+.tippy-box .tippy-content .editable-content.readonly {
+  padding: var(--spacing-08, 0.5rem);
+}
+.tippy-box .tippy-content .editable-content .maxchar-content {
+  display: flex;
+  align-items: center;
+  align-self: flex-end;
+  height: var(--spacing-24, 1.5rem);
+  padding-right: var(--spacing-08, 0.5rem);
+}
+.tippy-box .tippy-content .editable-content .action-content {
+  display: flex;
+  align-items: center;
+}
+.tippy-box .tippy-content .editable-content .action-content yoo-button {
+  padding: 0 var(--spacing-08, 0.5rem);
+}
+.tippy-box .tippy-content .editable-content .action-content .edit-content {
+  align-items: center;
+}
+.tippy-box .tippy-content .editable-content .action-content .edit-content yoo-icon {
+  padding-left: var(--spacing-08, 0.5rem);
+  cursor: pointer;
+}
+.tippy-box .tippy-content .editable-content .edit-content > * {
+  cursor: pointer;
+}
+.tippy-box .tippy-content .request-access {
+  padding: var(--spacing-08, 0.5rem);
+}
+.tippy-box .tippy-content .request-access .title {
+  margin-bottom: var(--spacing-08, 0.5rem);
+  font-weight: var(--font-weight-700, 700);
+}
+.tippy-box .tippy-content .request-access .sub-title {
+  display: flex;
+  margin-bottom: var(--spacing-08, 0.5rem);
+  font-weight: var(--font-weight-300, 300);
+  font-size: var(--font-size-14, 0.875rem);
+}
+.tippy-box .tippy-content .request-access .sub-title yoo-avatar {
+  margin: 0 var(--spacing-04, 0.25rem);
+}
+.tippy-box .tippy-content .request-access yoo-button {
+  max-width: 8rem;
+}
+
+.tippy-box[data-theme~=startameeting] .tippy-content {
+  padding: 0;
+  border-radius: var(--border-radius-04, 0.25rem);
+}
+
+.tippy-box[data-theme~=large] {
+  font-size: var(--font-size-16, 1rem);
+}
+.tippy-box[data-theme~=large] .tippy-content {
+  padding: var(--spacing-08, 0.5rem);
+}
+.tippy-box[data-theme~=large] .tippy-content .editable-content {
+  padding: var(--spacing-04, 0.25rem);
+}
+.tippy-box[data-theme~=large] .tippy-content .editable-content .text-content {
+  padding-right: var(--spacing-16, 1rem);
+}
+.tippy-box[data-theme~=large] .tippy-content .editable-content yoo-icon {
+  margin: 0 var(--spacing-04, 0.25rem);
+}
+
+.tippy-box[data-theme~=small] {
+  font-size: var(--font-size-16, 1rem);
+}
+.tippy-box[data-theme~=small] .tippy-content {
+  padding: var(--spacing-08, 0.5rem);
+}
+.tippy-box[data-theme~=small] .tippy-content .editable-content {
+  padding: var(--spacing-04, 0.25rem);
+}
+.tippy-box[data-theme~=small] .tippy-content .editable-content .text-content {
+  padding-right: var(--spacing-08, 0.5rem);
+}
+.tippy-box[data-theme~=small] .tippy-content .editable-content yoo-icon {
+  margin: 0 var(--spacing-04, 0.25rem);
+}
+
+.tippy-box[data-theme~=accent] {
+  background-color: var(--accent, #276ef1);
+}
+.tippy-box[data-theme~=accent] .tippy-tooltip {
+  padding: var(--spacing-08, 0.5rem);
+}
+.tippy-box[data-theme~=accent] .tippy-svg-arrow {
+  fill: var(--accent, #276ef1);
+}
+.tippy-box[data-theme~=accent][data-placement^=top] > .tippy-arrow::before {
+  border-top-color: var(--accent, #276ef1);
+}
+.tippy-box[data-theme~=accent][data-placement^=bottom] > .tippy-arrow::before {
+  border-bottom-color: var(--accent, #276ef1);
+}
+.tippy-box[data-theme~=accent][data-placement^=left] > .tippy-arrow::before {
+  border-left-color: var(--accent, #276ef1);
+}
+.tippy-box[data-theme~=accent][data-placement^=right] > .tippy-arrow::before {
+  border-right-color: var(--accent, #276ef1);
+}
+
+.tippy-box[data-theme~=anthracite] {
+  background-color: var(--anthracite, #1a1a1a);
+}
+.tippy-box[data-theme~=anthracite] .tippy-tooltip {
+  padding: var(--spacing-08, 0.5rem);
+}
+.tippy-box[data-theme~=anthracite] .tippy-svg-arrow {
+  fill: var(--anthracite, #1a1a1a);
+}
+.tippy-box[data-theme~=anthracite][data-placement^=top] > .tippy-arrow::before {
+  border-top-color: var(--anthracite, #1a1a1a);
+}
+.tippy-box[data-theme~=anthracite][data-placement^=bottom] > .tippy-arrow::before {
+  border-bottom-color: var(--anthracite, #1a1a1a);
+}
+.tippy-box[data-theme~=anthracite][data-placement^=left] > .tippy-arrow::before {
+  border-left-color: var(--anthracite, #1a1a1a);
+}
+.tippy-box[data-theme~=anthracite][data-placement^=right] > .tippy-arrow::before {
+  border-right-color: var(--anthracite, #1a1a1a);
+}
+
+.tippy-box[data-theme~=app-color] {
+  background-color: var(--app-color, #5a30f4);
+}
+.tippy-box[data-theme~=app-color] .tippy-tooltip {
+  padding: var(--spacing-08, 0.5rem);
+}
+.tippy-box[data-theme~=app-color] .tippy-svg-arrow {
+  fill: var(--app-color, #5a30f4);
+}
+.tippy-box[data-theme~=app-color][data-placement^=top] > .tippy-arrow::before {
+  border-top-color: var(--app-color, #5a30f4);
+}
+.tippy-box[data-theme~=app-color][data-placement^=bottom] > .tippy-arrow::before {
+  border-bottom-color: var(--app-color, #5a30f4);
+}
+.tippy-box[data-theme~=app-color][data-placement^=left] > .tippy-arrow::before {
+  border-left-color: var(--app-color, #5a30f4);
+}
+.tippy-box[data-theme~=app-color][data-placement^=right] > .tippy-arrow::before {
+  border-right-color: var(--app-color, #5a30f4);
+}
+
+.tippy-box[data-theme~=danger] {
+  background-color: var(--danger, #d44333);
+}
+.tippy-box[data-theme~=danger] .tippy-tooltip {
+  padding: var(--spacing-08, 0.5rem);
+}
+.tippy-box[data-theme~=danger] .tippy-svg-arrow {
+  fill: var(--danger, #d44333);
+}
+.tippy-box[data-theme~=danger][data-placement^=top] > .tippy-arrow::before {
+  border-top-color: var(--danger, #d44333);
+}
+.tippy-box[data-theme~=danger][data-placement^=bottom] > .tippy-arrow::before {
+  border-bottom-color: var(--danger, #d44333);
+}
+.tippy-box[data-theme~=danger][data-placement^=left] > .tippy-arrow::before {
+  border-left-color: var(--danger, #d44333);
+}
+.tippy-box[data-theme~=danger][data-placement^=right] > .tippy-arrow::before {
+  border-right-color: var(--danger, #d44333);
+}
+
+.tippy-box[data-theme~=dark] {
+  background-color: var(--dark, #000000);
+}
+.tippy-box[data-theme~=dark] .tippy-tooltip {
+  padding: var(--spacing-08, 0.5rem);
+}
+.tippy-box[data-theme~=dark] .tippy-svg-arrow {
+  fill: var(--dark, #000000);
+}
+.tippy-box[data-theme~=dark][data-placement^=top] > .tippy-arrow::before {
+  border-top-color: var(--dark, #000000);
+}
+.tippy-box[data-theme~=dark][data-placement^=bottom] > .tippy-arrow::before {
+  border-bottom-color: var(--dark, #000000);
+}
+.tippy-box[data-theme~=dark][data-placement^=left] > .tippy-arrow::before {
+  border-left-color: var(--dark, #000000);
+}
+.tippy-box[data-theme~=dark][data-placement^=right] > .tippy-arrow::before {
+  border-right-color: var(--dark, #000000);
+}
+
+.tippy-box[data-theme~=energized] {
+  background-color: var(--energized, #ffc043);
+}
+.tippy-box[data-theme~=energized] .tippy-tooltip {
+  padding: var(--spacing-08, 0.5rem);
+}
+.tippy-box[data-theme~=energized] .tippy-svg-arrow {
+  fill: var(--energized, #ffc043);
+}
+.tippy-box[data-theme~=energized][data-placement^=top] > .tippy-arrow::before {
+  border-top-color: var(--energized, #ffc043);
+}
+.tippy-box[data-theme~=energized][data-placement^=bottom] > .tippy-arrow::before {
+  border-bottom-color: var(--energized, #ffc043);
+}
+.tippy-box[data-theme~=energized][data-placement^=left] > .tippy-arrow::before {
+  border-left-color: var(--energized, #ffc043);
+}
+.tippy-box[data-theme~=energized][data-placement^=right] > .tippy-arrow::before {
+  border-right-color: var(--energized, #ffc043);
+}
+
+.tippy-box[data-theme~=info] {
+  background-color: var(--info, #d84c96);
+}
+.tippy-box[data-theme~=info] .tippy-tooltip {
+  padding: var(--spacing-08, 0.5rem);
+}
+.tippy-box[data-theme~=info] .tippy-svg-arrow {
+  fill: var(--info, #d84c96);
+}
+.tippy-box[data-theme~=info][data-placement^=top] > .tippy-arrow::before {
+  border-top-color: var(--info, #d84c96);
+}
+.tippy-box[data-theme~=info][data-placement^=bottom] > .tippy-arrow::before {
+  border-bottom-color: var(--info, #d84c96);
+}
+.tippy-box[data-theme~=info][data-placement^=left] > .tippy-arrow::before {
+  border-left-color: var(--info, #d84c96);
+}
+.tippy-box[data-theme~=info][data-placement^=right] > .tippy-arrow::before {
+  border-right-color: var(--info, #d84c96);
+}
+
+.tippy-box[data-theme~=light] {
+  background-color: var(--light, #ffffff);
+}
+.tippy-box[data-theme~=light] .tippy-tooltip {
+  padding: var(--spacing-08, 0.5rem);
+}
+.tippy-box[data-theme~=light] .tippy-svg-arrow {
+  fill: var(--light, #ffffff);
+}
+.tippy-box[data-theme~=light][data-placement^=top] > .tippy-arrow::before {
+  border-top-color: var(--light, #ffffff);
+}
+.tippy-box[data-theme~=light][data-placement^=bottom] > .tippy-arrow::before {
+  border-bottom-color: var(--light, #ffffff);
+}
+.tippy-box[data-theme~=light][data-placement^=left] > .tippy-arrow::before {
+  border-left-color: var(--light, #ffffff);
+}
+.tippy-box[data-theme~=light][data-placement^=right] > .tippy-arrow::before {
+  border-right-color: var(--light, #ffffff);
+}
+
+.tippy-box[data-theme~=stable] {
+  background-color: var(--stable, #adadad);
+}
+.tippy-box[data-theme~=stable] .tippy-tooltip {
+  padding: var(--spacing-08, 0.5rem);
+}
+.tippy-box[data-theme~=stable] .tippy-svg-arrow {
+  fill: var(--stable, #adadad);
+}
+.tippy-box[data-theme~=stable][data-placement^=top] > .tippy-arrow::before {
+  border-top-color: var(--stable, #adadad);
+}
+.tippy-box[data-theme~=stable][data-placement^=bottom] > .tippy-arrow::before {
+  border-bottom-color: var(--stable, #adadad);
+}
+.tippy-box[data-theme~=stable][data-placement^=left] > .tippy-arrow::before {
+  border-left-color: var(--stable, #adadad);
+}
+.tippy-box[data-theme~=stable][data-placement^=right] > .tippy-arrow::before {
+  border-right-color: var(--stable, #adadad);
+}
+
+.tippy-box[data-theme~=stable-alt] {
+  background-color: var(--stable-alt, #d0d0d0);
+}
+.tippy-box[data-theme~=stable-alt] .tippy-tooltip {
+  padding: var(--spacing-08, 0.5rem);
+}
+.tippy-box[data-theme~=stable-alt] .tippy-svg-arrow {
+  fill: var(--stable-alt, #d0d0d0);
+}
+.tippy-box[data-theme~=stable-alt][data-placement^=top] > .tippy-arrow::before {
+  border-top-color: var(--stable-alt, #d0d0d0);
+}
+.tippy-box[data-theme~=stable-alt][data-placement^=bottom] > .tippy-arrow::before {
+  border-bottom-color: var(--stable-alt, #d0d0d0);
+}
+.tippy-box[data-theme~=stable-alt][data-placement^=left] > .tippy-arrow::before {
+  border-left-color: var(--stable-alt, #d0d0d0);
+}
+.tippy-box[data-theme~=stable-alt][data-placement^=right] > .tippy-arrow::before {
+  border-right-color: var(--stable-alt, #d0d0d0);
+}
+
+.tippy-box[data-theme~=stable-light] {
+  background-color: var(--stable-light, #f1f1f1);
+}
+.tippy-box[data-theme~=stable-light] .tippy-tooltip {
+  padding: var(--spacing-08, 0.5rem);
+}
+.tippy-box[data-theme~=stable-light] .tippy-svg-arrow {
+  fill: var(--stable-light, #f1f1f1);
+}
+.tippy-box[data-theme~=stable-light][data-placement^=top] > .tippy-arrow::before {
+  border-top-color: var(--stable-light, #f1f1f1);
+}
+.tippy-box[data-theme~=stable-light][data-placement^=bottom] > .tippy-arrow::before {
+  border-bottom-color: var(--stable-light, #f1f1f1);
+}
+.tippy-box[data-theme~=stable-light][data-placement^=left] > .tippy-arrow::before {
+  border-left-color: var(--stable-light, #f1f1f1);
+}
+.tippy-box[data-theme~=stable-light][data-placement^=right] > .tippy-arrow::before {
+  border-right-color: var(--stable-light, #f1f1f1);
+}
+
+.tippy-box[data-theme~=stable-ultralight] {
+  background-color: var(--stable-ultralight, #fafafa);
+}
+.tippy-box[data-theme~=stable-ultralight] .tippy-tooltip {
+  padding: var(--spacing-08, 0.5rem);
+}
+.tippy-box[data-theme~=stable-ultralight] .tippy-svg-arrow {
+  fill: var(--stable-ultralight, #fafafa);
+}
+.tippy-box[data-theme~=stable-ultralight][data-placement^=top] > .tippy-arrow::before {
+  border-top-color: var(--stable-ultralight, #fafafa);
+}
+.tippy-box[data-theme~=stable-ultralight][data-placement^=bottom] > .tippy-arrow::before {
+  border-bottom-color: var(--stable-ultralight, #fafafa);
+}
+.tippy-box[data-theme~=stable-ultralight][data-placement^=left] > .tippy-arrow::before {
+  border-left-color: var(--stable-ultralight, #fafafa);
+}
+.tippy-box[data-theme~=stable-ultralight][data-placement^=right] > .tippy-arrow::before {
+  border-right-color: var(--stable-ultralight, #fafafa);
+}
+
+.tippy-box[data-theme~=success] {
+  background-color: var(--success, #3aa76d);
+}
+.tippy-box[data-theme~=success] .tippy-tooltip {
+  padding: var(--spacing-08, 0.5rem);
+}
+.tippy-box[data-theme~=success] .tippy-svg-arrow {
+  fill: var(--success, #3aa76d);
+}
+.tippy-box[data-theme~=success][data-placement^=top] > .tippy-arrow::before {
+  border-top-color: var(--success, #3aa76d);
+}
+.tippy-box[data-theme~=success][data-placement^=bottom] > .tippy-arrow::before {
+  border-bottom-color: var(--success, #3aa76d);
+}
+.tippy-box[data-theme~=success][data-placement^=left] > .tippy-arrow::before {
+  border-left-color: var(--success, #3aa76d);
+}
+.tippy-box[data-theme~=success][data-placement^=right] > .tippy-arrow::before {
+  border-right-color: var(--success, #3aa76d);
+}
+
+.tippy-box[data-theme~=text-color] {
+  background-color: var(--text-color, #807f83);
+}
+.tippy-box[data-theme~=text-color] .tippy-tooltip {
+  padding: var(--spacing-08, 0.5rem);
+}
+.tippy-box[data-theme~=text-color] .tippy-svg-arrow {
+  fill: var(--text-color, #807f83);
+}
+.tippy-box[data-theme~=text-color][data-placement^=top] > .tippy-arrow::before {
+  border-top-color: var(--text-color, #807f83);
+}
+.tippy-box[data-theme~=text-color][data-placement^=bottom] > .tippy-arrow::before {
+  border-bottom-color: var(--text-color, #807f83);
+}
+.tippy-box[data-theme~=text-color][data-placement^=left] > .tippy-arrow::before {
+  border-left-color: var(--text-color, #807f83);
+}
+.tippy-box[data-theme~=text-color][data-placement^=right] > .tippy-arrow::before {
+  border-right-color: var(--text-color, #807f83);
+}
+
+.tippy-box[data-theme~=warning] {
+  background-color: var(--warning, #ed6e33);
+}
+.tippy-box[data-theme~=warning] .tippy-tooltip {
+  padding: var(--spacing-08, 0.5rem);
+}
+.tippy-box[data-theme~=warning] .tippy-svg-arrow {
+  fill: var(--warning, #ed6e33);
+}
+.tippy-box[data-theme~=warning][data-placement^=top] > .tippy-arrow::before {
+  border-top-color: var(--warning, #ed6e33);
+}
+.tippy-box[data-theme~=warning][data-placement^=bottom] > .tippy-arrow::before {
+  border-bottom-color: var(--warning, #ed6e33);
+}
+.tippy-box[data-theme~=warning][data-placement^=left] > .tippy-arrow::before {
+  border-left-color: var(--warning, #ed6e33);
+}
+.tippy-box[data-theme~=warning][data-placement^=right] > .tippy-arrow::before {
+  border-right-color: var(--warning, #ed6e33);
+}
+
+/* app direction */
+/* border-radius */
+/* border-width */
+/* font family */
+/* font-size */
+/* font weights */
+/* icon size */
+/* used for logos */
+/* spacing for padding, margin, etc... */
+/* shadow */
+:root {
+  --safe-area-inset-top: 0rem;
+  --safe-area-inset-right: 0rem;
+  --safe-area-inset-bottom: 0rem;
+  --safe-area-inset-left: 0rem;
+}
+@supports (top: constant(safe-area-inset-top)) {
+  :root {
+    --safe-area-inset-top: constant(safe-area-inset-top);
+    --safe-area-inset-right: constant(safe-area-inset-right);
+    --safe-area-inset-bottom: constant(safe-area-inset-bottom);
+    --safe-area-inset-left: constant(safe-area-inset-left);
+  }
+}
+@supports (top: env(safe-area-inset-top)) {
+  :root {
+    --safe-area-inset-top: env(safe-area-inset-top);
+    --safe-area-inset-right: env(safe-area-inset-right);
+    --safe-area-inset-bottom: env(safe-area-inset-bottom);
+    --safe-area-inset-left: env(safe-area-inset-left);
+  }
+}
+
+.fr-popup.fr-active {
+  z-index: 30004 !important;
+  display: block !important;
+  opacity: 1 !important;
+}
+
+:host {
+  display: block;
+  overflow: visible;
+}
+:host .image {
+  background-color: transparent;
+  perspective: 1000px;
+}
+:host .image .inner-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  overflow: hidden;
+  text-align: center;
+  transform-style: preserve-3d;
+  transition: transform 0.8s;
+}
+:host .image .inner-container yoo-img {
+  border-radius: var(--border-radius-08, 0.5rem);
+}
+:host .image .inner-container .hotspot-container {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+:host .image .inner-container .hotspot-container .hotspot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: var(--success-20, rgba(58, 167, 109, 0.2));
+  border: var(--border-width-01, 0.0625rem) solid var(--success, #3aa76d);
+  border-radius: var(--border-radius-08, 0.5rem);
+  transition: background-color 250ms ease-in-out;
+}
+:host .image .inner-container .hotspot-container .hotspot.selected {
+  background-color: var(--app-color-20, rgba(90, 48, 244, 0.2));
+  border-color: var(--app-color, #5a30f4);
+}
+:host .detail-container {
+  display: flex;
+  flex-direction: column;
+  margin: var(--spacing-32, 2rem) var(--spacing-16, 1rem);
+}
+:host .detail-container .detail-description {
+  padding: var(--spacing-24, 1.5rem) var(--spacing-16, 1rem);
+  color: var(--light, #ffffff);
+  text-align: center;
+}
+:host .detail-container yoo-img:before {
+  display: block;
+  width: 0;
+  height: 0;
+  padding-bottom: 75%;
+  content: "";
+}
+
+:host([detailed-view]) {
+  background: transparent !important;
+}
+
+:host(.web) .detail-container {
+  width: 40%;
+  max-width: 37.5rem;
+  margin: var(--spacing-32, 2rem) auto;
+}
+:host(.web) .detail-container .detail-description {
+  padding: var(--spacing-32, 2rem) 0;
+}
+:host(.web) .detail-container .button {
+  margin: auto;
+}
+
+:host(:not(.web)) .detail-container {
+  height: 100%;
+  overflow: auto;
+}
+:host(:not(.web)) .button {
+  display: flex;
+  align-items: flex-end;
+  height: 100%;
+}
+:host(:not(.web)) .button yoo-button {
+  width: 100%;
+}
+
+:host([animated]) .image-container {
+  --image-index: 0;
+  transform: translateY(100vh);
+  animation-name: slide-up;
+  animation-duration: 0.4s;
+  animation-timing-function: var(--ease-out-quad);
+  animation-delay: calc(0.5s + var(--image-index) * 0.1s);
+  animation-fill-mode: forwards;
+}