:host dialog {
  background-color: transparent;
  border: none;
  bottom: 0;
  display: block;
  height: 0;
  left: 0;
  margin: 0;
  opacity: 0;
  padding: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.2s linear 0s, visibility 0s linear 0.2s;
  visibility: hidden;
  width: 100%;
}
:host dialog[open] {
  height: 100vh;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.1s linear 0.2s, visibility 0s linear 0.2s;
  visibility: visible;
}
:host dialog::backdrop {
  display: none;
}
:host dialog::modal {
  max-width: 100vw;
  width: 100vw;
}
:host .ojp-modal-wrapper {
  bottom: 0;
  display: grid;
  grid-template-columns: var(--ojp-modal--outer-horizontal-padding) 1fr var(--ojp-modal--outer-horizontal-padding);
  grid-template-rows: max-content var(--ojp-modal--outer-vertical-padding) 1fr var(--ojp-modal--outer-vertical-padding);
  height: 100%;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 10;
}
:host .ojp-modal-overlay {
  background-color: var(--ojp-modal--overlay-color);
  grid-area: 1/1/5/4;
  height: 100%;
  width: 100%;
}
:host .ojp-modal-wrapper .ojp-modal-panel {
  background-color: var(--ojp-modal--panel-color);
  border-radius: var(--ojp-modal--panel-border-radius);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: var(--ojp-modal--inner-vertical-padding) 1fr var(--ojp-modal--inner-vertical-padding);
  grid-area: var(--ojp-modal--panel-grid-area);
  height: auto;
  overflow: hidden;
  padding-top: var(--ojp-modal--padding-top-bottom);
  padding-bottom: var(--ojp-modal--padding-top-bottom);
  padding-left: var(--ojp-modal--padding-inline);
  padding-right: var(--ojp-modal--padding-inline);
  position: relative;
  transition: visibility 0s linear 0s, opacity 0.2s, transform 0.2s;
}
:host .ojp-modal-wrapper .ojp-modal-panel .slot-container {
  grid-area: 1/1/4/2;
  overflow: auto;
}
:host .ojp-modal-overflow--top {
  grid-area: 1/1/2/2;
  height: var(--ojp-modal--overflow-gradient-height);
  transform: rotate(180deg) translateY(var(--ojp-modal--overflow-gradient-offset));
  width: 100%;
  z-index: 0;
}
:host .ojp-modal-overflow--bottom {
  grid-area: 3/1/4/2;
  height: var(--space-l-xl);
  transform: translateY(var(--ojp-modal--overflow-gradient-offset));
  visibility: var(--ojp-modal--overflow-gradient-visibility);
  width: 100%;
}
:host .overflow-gradient--visible {
  background: var(--ojp-modal--overflow-gradient);
}
:host .ojp-modal-close {
  align-self: flex-start;
  grid-area: var(--ojp-modal--close-grid-area);
  justify-self: flex-end;
  z-index: 12;
}
:host .ojp-modal-close .close-button {
  margin-right: var(--ojp-modal--close-icon-margin);
  margin-top: var(--ojp-modal--close-icon-margin);
}
:host .close-button {
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  outline: none;
  padding: 0;
}
:host .ojp-modal-wrapper .ojp-modal-close .close-button {
  transition: visibility 0s linear 0s, opacity 0.2s, transform 0.2s;
}
:host :focus-visible, :host :focus {
  outline: var(--ojp-modal--focus-outline);
}
:host .focus-trap {
  border: 0;
  height: 0;
  padding: 0;
  width: 0;
}
:host .modal-fade {
  background: var(--ojp-modal--overflow-gradient);
}
:host .close-button--inside {
  --ojp-modal--close-grid-area: var(--ojp-modal--close-grid-area--inside);
  align-self: flex-start;
}
:host .close-button--outside {
  --ojp-modal--close-grid-area: 1/3/2/4;
}
:host .scrollbar--visible::-webkit-scrollbar {
  scrollbar-width: auto;
}
:host .scrollbar--hidden::-webkit-scrollbar {
  background: transparent;
  display: none;
  /* Chrome */
  -ms-overflow-style: none;
  /* IE 11 */
  scrollbar-width: none;
  /* Firefox 64 */
}
:host .scrollbar--hidden.slot-container {
  scrollbar-width: none;
}
:host .noscroll {
  overflow: hidden;
}