slot-fb[hidden], slot[hidden] {
  display: initial !important;
}

/**
* @prop --lar-modal-padding-top: Top padding of the toolbar
* @prop --lar-modal-padding-right: End padding of the toolbar
* @prop --lar-modal-padding-bottom: Bottom padding of the toolbar
* @prop --lar-modal-padding-left: Start padding of the toolbar
* @prop --lar-modal-big-icon-size: Modal big icon size
* @prop --lar-modal-small-icon-size: Modal small icon size
* @prop --lar-modal-value-font-size: Value text font size
* @prop --lar-modal-blur: General blur on overlays, here it's used for header. Currently supported only on Safari
* @prop --lar-modal-header-opacity: Modal header opacity
* @prop --lar-modal-icon-box-shadow: Modal header icon box shaddow properties 
*/
:host {
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 3;
}

lar-backdrop {
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.lar-modal-wrapper {
  position: absolute;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: var(--lar-background-color, #000) !important;
  width: 100%;
  height: 100%;
  z-index: 10;
  opacity: 0;
  max-width: 600px;
  min-height: 300px;
  margin: 0 auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.2), 0 24px 80px -16px rgba(0, 0, 0, 0.15);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, opacity;
}

.lar-modal-content {
  flex: 1; /* takes the remaining height of the "container" div */
  display: block;
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-overflow-scrolling: touch;
}

.lar-modal-scroll {
  --safe-area-inset-top: env(safe-area-inset-top);
  right: 0;
  left: 0;
  top: calc((var(--lar-modal-big-icon-size, 4rem) + var(--lar-modal-padding-top, 2rem)) * 2 * -1);
  bottom: 0;
  padding-top: calc(var(--safe-area-inset-top) + (var(--lar-modal-big-icon-size, 4rem) + var(--lar-modal-padding-top, 2rem)) * 4);
  position: absolute;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
  -ms-scroll-chaining: none;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

.lar-modal-scroll.small {
  --safe-area-inset-top: env(safe-area-inset-top);
  right: 0;
  left: 0;
  top: calc((var(--lar-modal-small-icon-size, 1.5rem) + var(--lar-modal-padding-top, 2rem)) * 2 * -1);
  bottom: 0;
  padding-top: calc(var(--safe-area-inset-top) + (var(--lar-modal-small-icon-size, 1.5rem) + var(--lar-modal-padding-top, 2rem)) * 3.5);
}

.lar-toolbar {
  position: absolute;
  width: 100%;
  z-index: 4;
  backdrop-filter: blur(var(--lar-modal-blur, 3px));
  -webkit-backdrop-filter: blur(var(--lar-modal-blur, 3px));
  padding-top: env(safe-area-inset-top);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: backdrop-filter;
}

.lar-start, .lar-end {
  min-width: 40px;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.lar-start a {
  display: inline-block;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
  padding: 0.4rem;
  margin: -0.4rem;
}

.lar-start a:active {
  transform: scale(0.9);
  background: rgba(0, 0, 0, 0.05);
}

.lar-value {
  font-size: var(--lar-modal-value-font-size, 2.2rem);
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
  display: block;
  max-width: 100%;
  min-height: calc(var(--lar-modal-value-font-size, 2.2rem) * 1.2);
  text-align: center;
  margin: 1rem 0;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.lar-value:empty {
  display: none !important;
}

.lar-toolbar-background {
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: -1;
  opacity: var(--lar-modal-header-opacity, 0.8);
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--lar-background-color, #000);
}

.lar-toolbar-container {
  padding: 0.8rem;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  width: 100%;
  box-sizing: border-box;
}

.lar-modal-body {
  padding: var(--lar-modal-padding-top, 2rem) var(--lar-modal-padding-right, 1rem) var(--lar-modal-padding-bottom, 1.3rem) var(--lar-modal-padding-left, 1rem);
  position: relative;
}

.lar-modal-components-slot {
  animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
  padding-top: 1.5rem;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.lar-modal-icon {
  margin: calc(var(--lar-modal-big-icon-size, 4rem) / 2) auto;
  padding: calc(var(--lar-modal-big-icon-size, 4rem) / 3);
  width: var(--lar-modal-big-icon-size, 4rem);
  height: var(--lar-modal-big-icon-size, 4rem);
  border-radius: 50%;
  text-align: center;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  box-sizing: content-box;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center center;
}

.lar-modal-icon::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.05) 100%);
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
}

.lar-modal-icon.small {
  margin: calc(var(--lar-modal-small-icon-size, 1.5rem) / 2) auto;
  padding: calc(var(--lar-modal-small-icon-size, 1.5rem) / 3);
  width: var(--lar-modal-small-icon-size, 1.5rem);
  height: var(--lar-modal-small-icon-size, 1.5rem);
}

.lar-modal-icon.small::before {
  inset: -2px;
}

.lar-mid:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  box-sizing: content-box;
}

.lar-modal-icon lar-icon {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
  transition: filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lar-modal-icon:empty, h1:empty, h2:empty {
  display: none !important;
}

h2, h3 {
  padding: 0;
  margin: 0.2rem;
  font-size: 1.7rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

h2 {
  font-weight: 700;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

h3 {
  color: var(--lar-text-color-step-250, rgb(191.25, 191.25, 191.25));
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.01em;
  opacity: 0.85;
}

:host(.lar-color-primary) .lar-modal-icon lar-icon {
  fill: var(--lar-color-primary-contrast, #fff) !important;
  stroke: var(--lar-color-primary-contrast, #fff) !important;
}

:host(.lar-color-primary) .lar-modal-icon {
  --shadow-color1: rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.35);
  --shadow-color2: rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.25);
  --shadow-color3: rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.98);
  --shadow-color4: rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.5);
  background-color: #780bb7;
  box-shadow: var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 2) var(--shadow-color2), 0 8px 32px -8px var(--shadow-color4), inset 0 0 0 var(--lar-modal-big-icon-size, 4rem) var(--shadow-color3), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.15));
}

:host(.lar-color-primary) .lar-modal-icon.small {
  --shadow-color1: rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.35);
  --shadow-color2: rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.25);
  --shadow-color3: rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.98);
  --shadow-color4: rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.5);
  background-color: #780bb7;
  box-shadow: var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 2) var(--shadow-color2), 0 6px 24px -6px var(--shadow-color4), inset 0 0 0 var(--lar-modal-small-icon-size, 1.5rem) var(--shadow-color3), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.15));
}

:host(.lar-color-secondary) .lar-modal-icon lar-icon {
  fill: var(--lar-color-secondary-contrast, #fff) !important;
  stroke: var(--lar-color-secondary-contrast, #fff) !important;
}

:host(.lar-color-secondary) .lar-modal-icon {
  --shadow-color1: rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.35);
  --shadow-color2: rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.25);
  --shadow-color3: rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.98);
  --shadow-color4: rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.5);
  background-color: #7fb800;
  box-shadow: var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 2) var(--shadow-color2), 0 8px 32px -8px var(--shadow-color4), inset 0 0 0 var(--lar-modal-big-icon-size, 4rem) var(--shadow-color3), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.15));
}

:host(.lar-color-secondary) .lar-modal-icon.small {
  --shadow-color1: rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.35);
  --shadow-color2: rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.25);
  --shadow-color3: rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.98);
  --shadow-color4: rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.5);
  background-color: #7fb800;
  box-shadow: var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 2) var(--shadow-color2), 0 6px 24px -6px var(--shadow-color4), inset 0 0 0 var(--lar-modal-small-icon-size, 1.5rem) var(--shadow-color3), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.15));
}

:host(.lar-color-tertiary) .lar-modal-icon lar-icon {
  fill: var(--lar-color-tertiary-contrast, #fff) !important;
  stroke: var(--lar-color-tertiary-contrast, #fff) !important;
}

:host(.lar-color-tertiary) .lar-modal-icon {
  --shadow-color1: rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.35);
  --shadow-color2: rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.25);
  --shadow-color3: rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.98);
  --shadow-color4: rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.5);
  background-color: #00a6ed;
  box-shadow: var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 2) var(--shadow-color2), 0 8px 32px -8px var(--shadow-color4), inset 0 0 0 var(--lar-modal-big-icon-size, 4rem) var(--shadow-color3), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.15));
}

:host(.lar-color-tertiary) .lar-modal-icon.small {
  --shadow-color1: rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.35);
  --shadow-color2: rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.25);
  --shadow-color3: rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.98);
  --shadow-color4: rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.5);
  background-color: #00a6ed;
  box-shadow: var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 2) var(--shadow-color2), 0 6px 24px -6px var(--shadow-color4), inset 0 0 0 var(--lar-modal-small-icon-size, 1.5rem) var(--shadow-color3), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.15));
}

:host(.lar-color-success) .lar-modal-icon lar-icon {
  fill: var(--lar-color-success-contrast, #fff) !important;
  stroke: var(--lar-color-success-contrast, #fff) !important;
}

:host(.lar-color-success) .lar-modal-icon {
  --shadow-color1: rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.35);
  --shadow-color2: rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.25);
  --shadow-color3: rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.98);
  --shadow-color4: rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.5);
  background-color: #7fb800;
  box-shadow: var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 2) var(--shadow-color2), 0 8px 32px -8px var(--shadow-color4), inset 0 0 0 var(--lar-modal-big-icon-size, 4rem) var(--shadow-color3), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.15));
}

:host(.lar-color-success) .lar-modal-icon.small {
  --shadow-color1: rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.35);
  --shadow-color2: rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.25);
  --shadow-color3: rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.98);
  --shadow-color4: rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.5);
  background-color: #7fb800;
  box-shadow: var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 2) var(--shadow-color2), 0 6px 24px -6px var(--shadow-color4), inset 0 0 0 var(--lar-modal-small-icon-size, 1.5rem) var(--shadow-color3), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.15));
}

:host(.lar-color-warning) .lar-modal-icon lar-icon {
  fill: var(--lar-color-warning-contrast, #fff) !important;
  stroke: var(--lar-color-warning-contrast, #fff) !important;
}

:host(.lar-color-warning) .lar-modal-icon {
  --shadow-color1: rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.35);
  --shadow-color2: rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.25);
  --shadow-color3: rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.98);
  --shadow-color4: rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.5);
  background-color: #ffb400;
  box-shadow: var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 2) var(--shadow-color2), 0 8px 32px -8px var(--shadow-color4), inset 0 0 0 var(--lar-modal-big-icon-size, 4rem) var(--shadow-color3), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.15));
}

:host(.lar-color-warning) .lar-modal-icon.small {
  --shadow-color1: rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.35);
  --shadow-color2: rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.25);
  --shadow-color3: rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.98);
  --shadow-color4: rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.5);
  background-color: #ffb400;
  box-shadow: var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 2) var(--shadow-color2), 0 6px 24px -6px var(--shadow-color4), inset 0 0 0 var(--lar-modal-small-icon-size, 1.5rem) var(--shadow-color3), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.15));
}

:host(.lar-color-danger) .lar-modal-icon lar-icon {
  fill: var(--lar-color-danger-contrast, #fff) !important;
  stroke: var(--lar-color-danger-contrast, #fff) !important;
}

:host(.lar-color-danger) .lar-modal-icon {
  --shadow-color1: rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.35);
  --shadow-color2: rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.25);
  --shadow-color3: rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.98);
  --shadow-color4: rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.5);
  background-color: #f6511d;
  box-shadow: var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 2) var(--shadow-color2), 0 8px 32px -8px var(--shadow-color4), inset 0 0 0 var(--lar-modal-big-icon-size, 4rem) var(--shadow-color3), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.15));
}

:host(.lar-color-danger) .lar-modal-icon.small {
  --shadow-color1: rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.35);
  --shadow-color2: rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.25);
  --shadow-color3: rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.98);
  --shadow-color4: rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.5);
  background-color: #f6511d;
  box-shadow: var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 2) var(--shadow-color2), 0 6px 24px -6px var(--shadow-color4), inset 0 0 0 var(--lar-modal-small-icon-size, 1.5rem) var(--shadow-color3), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.15));
}

:host(.lar-color-light) .lar-modal-icon lar-icon {
  fill: var(--lar-color-light-contrast, #000) !important;
  stroke: var(--lar-color-light-contrast, #000) !important;
}

:host(.lar-color-light) .lar-modal-icon {
  --shadow-color1: rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.35);
  --shadow-color2: rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.25);
  --shadow-color3: rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.98);
  --shadow-color4: rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.5);
  background-color: #f4f5f8;
  box-shadow: var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 2) var(--shadow-color2), 0 8px 32px -8px var(--shadow-color4), inset 0 0 0 var(--lar-modal-big-icon-size, 4rem) var(--shadow-color3), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.15));
}

:host(.lar-color-light) .lar-modal-icon.small {
  --shadow-color1: rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.35);
  --shadow-color2: rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.25);
  --shadow-color3: rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.98);
  --shadow-color4: rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.5);
  background-color: #f4f5f8;
  box-shadow: var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 2) var(--shadow-color2), 0 6px 24px -6px var(--shadow-color4), inset 0 0 0 var(--lar-modal-small-icon-size, 1.5rem) var(--shadow-color3), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.15));
}

:host(.lar-color-medium) .lar-modal-icon lar-icon {
  fill: var(--lar-color-medium-contrast, #000) !important;
  stroke: var(--lar-color-medium-contrast, #000) !important;
}

:host(.lar-color-medium) .lar-modal-icon {
  --shadow-color1: rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.35);
  --shadow-color2: rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.25);
  --shadow-color3: rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.98);
  --shadow-color4: rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.5);
  background-color: #d6d6d6;
  box-shadow: var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 2) var(--shadow-color2), 0 8px 32px -8px var(--shadow-color4), inset 0 0 0 var(--lar-modal-big-icon-size, 4rem) var(--shadow-color3), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.15));
}

:host(.lar-color-medium) .lar-modal-icon.small {
  --shadow-color1: rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.35);
  --shadow-color2: rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.25);
  --shadow-color3: rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.98);
  --shadow-color4: rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.5);
  background-color: #d6d6d6;
  box-shadow: var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 2) var(--shadow-color2), 0 6px 24px -6px var(--shadow-color4), inset 0 0 0 var(--lar-modal-small-icon-size, 1.5rem) var(--shadow-color3), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.15));
}

:host(.lar-color-dark) .lar-modal-icon lar-icon {
  fill: var(--lar-color-dark-contrast, #fff) !important;
  stroke: var(--lar-color-dark-contrast, #fff) !important;
}

:host(.lar-color-dark) .lar-modal-icon {
  --shadow-color1: rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.35);
  --shadow-color2: rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.25);
  --shadow-color3: rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.98);
  --shadow-color4: rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.5);
  background-color: #222428;
  box-shadow: var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 2) var(--shadow-color2), 0 8px 32px -8px var(--shadow-color4), inset 0 0 0 var(--lar-modal-big-icon-size, 4rem) var(--shadow-color3), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.15));
}

:host(.lar-color-dark) .lar-modal-icon.small {
  --shadow-color1: rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.35);
  --shadow-color2: rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.25);
  --shadow-color3: rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.98);
  --shadow-color4: rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.5);
  background-color: #222428;
  box-shadow: var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 2) var(--shadow-color2), 0 6px 24px -6px var(--shadow-color4), inset 0 0 0 var(--lar-modal-small-icon-size, 1.5rem) var(--shadow-color3), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.15));
}