@import "../../../theme/global";

/**
* @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 
*/

$modal-padding-top:         var(--lar-modal-padding-top, 2rem) !default;
$modal-padding-right:       var(--lar-modal-padding-right, 1rem) !default;
$modal-padding-bottom:      var(--lar-modal-padding-bottom, 1.3rem) !default;
$modal-padding-left:        var(--lar-modal-padding-left, 1rem) !default;

$blur:                      var(--lar-modal-blur, 3px) !default;
$opacity:                   var(--lar-modal-header-opacity, .8) !default;

$modal-big-icon-size:       var(--lar-modal-big-icon-size, 4rem) !default;
$modal-small-icon-size:     var(--lar-modal-small-icon-size, 1.5rem) !default;
$modal-value-font-size:     var(--lar-modal-value-font-size, 2.2rem) !default;

:host {
  @include position(0, 0, 0, 0);
  overflow: hidden;
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 3;
}
lar-backdrop {
  opacity: 0; // default before animation
  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);
  @include position(0, 0, 0, 0);
  background-color: $background-color !important;
  width: 100%;
  height: 100%;
  z-index: 10;
  opacity: 0; // default before animation
  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);
  @include position(calc((#{$modal-big-icon-size} + #{$modal-padding-top}) * 2 * -1), 0, 0, 0);
  padding-top: calc(var(--safe-area-inset-top) + (#{$modal-big-icon-size} + #{$modal-padding-top}) * 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);
   @include position(calc((#{$modal-small-icon-size} + #{$modal-padding-top}) * 2 * -1), 0, 0, 0);
   padding-top: calc(var(--safe-area-inset-top) + (#{$modal-small-icon-size} + #{$modal-padding-top}) * 3.5);
 }
.lar-toolbar {
  position: absolute;
  width: 100%;
  z-index: 4;
  backdrop-filter: blur($blur);
  -webkit-backdrop-filter: blur($blur);
  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: $modal-value-font-size;
   white-space: nowrap;
   overflow: hidden !important;
   text-overflow: ellipsis;
   display: block;
   max-width: 100%;
   min-height: calc(#{$modal-value-font-size} * 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 {
  @include position(0, 0, 0, 0);
  position: absolute;
  z-index: -1;
  opacity: $opacity;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: $background-color;
}
.lar-toolbar-container {
  @include padding(0.8rem);
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  width: 100%;
  box-sizing: border-box;
}
.lar-modal-body {
  @include padding($modal-padding-top, $modal-padding-right, $modal-padding-bottom, $modal-padding-left);
  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(#{$modal-big-icon-size} / 2) auto;
  @include padding(calc(#{$modal-big-icon-size} / 3));
  width: $modal-big-icon-size;
  height: $modal-big-icon-size;
  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(#{$modal-small-icon-size} / 2) auto;
  @include padding(calc(#{$modal-small-icon-size} / 3));
  width: $modal-small-icon-size;
  height: $modal-small-icon-size;
}
.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: .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: $text-color-step-250;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.01em;
  opacity: 0.85;
}


@mixin generate-modal-color($color-name) {
  :host(.lar-color-#{$color-name}) .lar-modal-icon lar-icon {
    fill: lar-color($color-name, contrast) !important;
    stroke: lar-color($color-name, contrast) !important;
  }
  :host(.lar-color-#{$color-name}) .lar-modal-icon {
    $value: map-get($colors, $color-name);
    $base: map-get($value, base);
    $base: color-to-rgb-list($base);
    // https://forum.ionicframework.com/t/ionic4-safari-issues-with-var-rgb-rgb-vars/146048
    // https://www.w3.org/TR/css-variables/#using-variables -- commas are allowed but it doesnt work in Safari
    --shadow-color1: rgba(var(--lar-color-#{$color-name}-rgb, #{$base}), 0.35);
    --shadow-color2: rgba(var(--lar-color-#{$color-name}-rgb, #{$base}), 0.25);
    --shadow-color3: rgba(var(--lar-color-#{$color-name}-rgb, #{$base}), 0.98);
    --shadow-color4: rgba(var(--lar-color-#{$color-name}-rgb, #{$base}), 0.5);
    background-color: map-get($value, base);
    box-shadow: var(--lar-modal-icon-box-shadow,
      0 0 0 calc(#{$modal-big-icon-size} / 4) var(--shadow-color1),
      0 0 0 calc(#{$modal-big-icon-size} / 2) var(--shadow-color2),
      0 8px 32px -8px var(--shadow-color4),
      inset 0 0 0 #{$modal-big-icon-size} 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-#{$color-name}) .lar-modal-icon.small {
    $value: map-get($colors, $color-name);
    $base: map-get($value, base);
    $base: color-to-rgb-list($base);
    // https://forum.ionicframework.com/t/ionic4-safari-issues-with-var-rgb-rgb-vars/146048
    // https://www.w3.org/TR/css-variables/#using-variables -- commas are allowed but it doesnt work in Safari
    --shadow-color1: rgba(var(--lar-color-#{$color-name}-rgb, #{$base}), 0.35);
    --shadow-color2: rgba(var(--lar-color-#{$color-name}-rgb, #{$base}), 0.25);
    --shadow-color3: rgba(var(--lar-color-#{$color-name}-rgb, #{$base}), 0.98);
    --shadow-color4: rgba(var(--lar-color-#{$color-name}-rgb, #{$base}), 0.5);
    background-color: map-get($value, base);
    box-shadow: var(--lar-modal-icon-box-shadow,
      0 0 0 calc(#{$modal-small-icon-size} / 4) var(--shadow-color1),
      0 0 0 calc(#{$modal-small-icon-size} / 2) var(--shadow-color2),
      0 6px 24px -6px var(--shadow-color4),
      inset 0 0 0 #{$modal-small-icon-size} var(--shadow-color3),
      inset 0 1px 2px rgba(255, 255, 255, 0.2),
      inset 0 -1px 2px rgba(0, 0, 0, 0.15));
  }
}

@each $color-name, $value in $colors {
   @include generate-modal-color($color-name);
}