/**
 * Since stencilJs can't use global css files besides for css variables
 * when we need to handle responsive behavior, we have to manually
 * import this scss in the corresponding component.
 *
 * To use any of the mixins, it's as simple as adding a @include
 * with the right tag.
 */
:host([type=modal]) {
  --child-padding: var(--grit-overlay-padding);
  --open-animation: show-up;
  --close-animation: show-down;
  --backdrop-background: var(--grit-overlay-modal-backdrop-background);
}

:host([type=side-sheet]) {
  --child-padding: var(--grit-overlay-side-sheet-padding);
  --open-animation: slide-in;
  --close-animation: slide-out;
  --backdrop-background: var(--grit-overlay-sheet-backdrop-background);
}

:host([type=bottom-sheet]) {
  --child-padding: var(--grit-overlay-padding);
  --open-animation: slide-up;
  --close-animation: slide-down;
  --backdrop-background: var(--grit-overlay-sheet-backdrop-background);
}

.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: var(--backdrop-background);
  transition: var(--grit-overlay-backdrop-transition);
  visibility: hidden;
  opacity: 0;
}

:host([show-overlay]) .backdrop {
  visibility: visible;
  opacity: 1;
  transition: var(--grit-overlay-backdrop-transition);
  pointer-events: auto;
}

.overlay {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 1000;
  background: var(--grit-overlay-background);
  -webkit-animation-duration: var(--grit-overlay-animation-duration);
          animation-duration: var(--grit-overlay-animation-duration);
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

:host([type=modal]) .overlay {
  left: 0;
  opacity: 0;
  max-height: var(--grit-overlay-modal-sm-max-height);
  border-radius: var(--grit-overlay-border-radius);
  margin-left: var(--grit-overlay-modal-sm-margin);
  margin-right: var(--grit-overlay-modal-sm-margin);
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
@media (min-width: 600px) {
  :host([type=modal]) .overlay {
    margin: auto;
    width: var(--grit-overlay-width);
    max-height: var(--grit-overlay-max-height);
  }
}

:host([type=side-sheet]) .overlay {
  max-width: var(--grit-overlay-max-width);
  width: 100%;
}
@media (min-width: 600px) {
  :host([type=side-sheet]) .overlay {
    width: var(--grit-overlay-width);
  }
}

:host([type=bottom-sheet]) .overlay {
  top: inherit;
  max-height: var(--grit-overlay-bottom-sheet-sm-max-height);
  width: 100%;
}

.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--child-padding);
  font-family: var(--grit-font-family-header);
  font-size: var(--grit-font-size-1);
  font-weight: var(--grit-font-weight-bold);
  line-height: var(--grit-common-line-height);
  color: var(--grit-overlay-text-color);
}

:host([type=side-sheet], [type=bottom-sheet]) .title {
  padding-bottom: var(--grit-overlay-sheet-title-padding-bottom);
}

.content-container {
  padding: 0 var(--child-padding);
  overflow: hidden;
  color: var(--grit-overlay-text-color);
  font-family: var(--grit-font-family-body);
  font-size: var(--grit-font-size-1);
  font-weight: 400;
  line-height: 24px;
}
.content-container.no-title:not(.no-footer) {
  padding: var(--child-padding);
  padding-bottom: 0;
}
.content-container.no-footer:not(.no-title) {
  padding: 0 var(--child-padding) var(--child-padding);
}
.content-container.no-title.no-footer {
  padding: var(--child-padding);
}

.footer {
  display: flex;
  justify-content: center;
  margin-top: auto;
  padding: var(--child-padding);
}

.no-content {
  padding: 0;
}

grit-wc-icon > i {
  font-style: unset;
  font-weight: 100;
}

grit-wc-button {
  --button-padding-sm: var(--grit-overlay-close-button-padding);
}

.open-animation {
  -webkit-animation-name: var(--open-animation);
          animation-name: var(--open-animation);
}

.close-animation {
  -webkit-animation-name: var(--close-animation);
          animation-name: var(--close-animation);
}

@-webkit-keyframes show-up {
  from {
    bottom: -100px;
    opacity: 0;
  }
  to {
    bottom: 0px;
    opacity: 1;
  }
}

@keyframes show-up {
  from {
    bottom: -100px;
    opacity: 0;
  }
  to {
    bottom: 0px;
    opacity: 1;
  }
}
@-webkit-keyframes show-down {
  from {
    bottom: 0px;
    opacity: 1;
  }
  to {
    bottom: -100px;
    opacity: 0;
  }
}
@keyframes show-down {
  from {
    bottom: 0px;
    opacity: 1;
  }
  to {
    bottom: -100px;
    opacity: 0;
  }
}
@-webkit-keyframes slide-in {
  from {
    right: -600px;
  }
  to {
    right: 0;
  }
}
@keyframes slide-in {
  from {
    right: -600px;
  }
  to {
    right: 0;
  }
}
@-webkit-keyframes slide-out {
  from {
    right: 0;
  }
  to {
    right: -600px;
  }
}
@keyframes slide-out {
  from {
    right: 0;
  }
  to {
    right: -600px;
  }
}
@-webkit-keyframes slide-up {
  from {
    bottom: -600px;
  }
  to {
    bottom: 0;
  }
}
@keyframes slide-up {
  from {
    bottom: -600px;
  }
  to {
    bottom: 0;
  }
}
@-webkit-keyframes slide-down {
  from {
    bottom: 0;
  }
  to {
    bottom: -600px;
  }
}
@keyframes slide-down {
  from {
    bottom: 0;
  }
  to {
    bottom: -600px;
  }
}