:host {
  position: relative;
  box-sizing: border-box;
  font-feature-settings: "cv03", "cv04", "cv11";
}
:host *, :host *:before, :host *:after {
  box-sizing: inherit;
}

/**
 * @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.
 */
:host {
  --width: 31rem;
  --padding: var(--sl-spacing-large);
  display: contents;
}

.dialog {
  display: flex;
  justify-content: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--sl-z-index-dialog);
}
.dialog:not(.dialog--visible) {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}
.dialog.dialog--position-center {
  align-items: center;
}
.dialog.dialog--position-top {
  align-items: start;
  padding: var(--sl-spacing-xxx-large);
}

.dialog__panel {
  display: flex;
  flex-direction: column;
  z-index: 2;
  width: var(--width);
  max-width: calc(100% - var(--sl-spacing-xx-large));
  max-height: calc(100% - var(--sl-spacing-xx-large));
  background-color: var(--sl-panel-background-color);
  border-radius: var(--sl-border-radius-medium);
  box-shadow: var(--sl-shadow-x-large);
  opacity: 0;
  transform: scale(0.8);
  transition: var(--sl-transition-medium) opacity, var(--sl-transition-medium) transform;
}
.dialog__panel:focus {
  outline: none;
}

@media screen and (max-width: 420px) {
  .dialog__panel {
    max-height: 80vh;
  }
}
.dialog--open .dialog__panel {
  display: flex;
  opacity: 1;
  transform: none;
}

.dialog__header {
  flex: 0 0 auto;
  display: flex;
}

.dialog__header--discreet {
  position: absolute;
  align-self: end;
  z-index: 1;
  height: var(--sl-spacing-x-large);
  overflow: hidden;
}
.dialog__header--discreet > sl-icon-button {
  font-size: var(--sl-font-size-large);
  padding: 0 var(--sl-spacing-x-small);
}

.dialog__header--dense {
  border-bottom: 1px solid var(--sl-color-gray-300);
}
.dialog__header--dense .dialog__title {
  flex: 1 1 auto;
  font-size: var(--sl-font-size-medium);
  line-height: var(--sl-line-height-dense);
  padding: var(--sl-spacing-small) var(--sl-spacing-large);
}
.dialog__header--dense > sl-icon-button {
  font-size: var(--sl-font-size-medium);
  padding: 0 var(--sl-spacing-x-small);
}

.dialog__title {
  flex: 1 1 auto;
  font-size: var(--sl-font-size-large);
  line-height: var(--sl-line-height-dense);
  padding: var(--sl-spacing-large);
}

.dialog__close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  font-size: var(--sl-font-size-x-large);
  padding: 0 var(--sl-spacing-large);
}

.dialog__body {
  flex: 1 1 auto;
  padding: var(--padding);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.dialog__footer {
  flex: 0 0 auto;
  text-align: right;
  padding: var(--sl-spacing-large);
}
.dialog__footer ::slotted(sl-button:not(:first-of-type)) {
  margin-left: var(--sl-spacing-x-small);
}

.dialog:not(.dialog--has-footer) .dialog__footer {
  display: none;
}

.dialog__overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--sl-overlay-background-color);
  opacity: 0;
  transition: var(--sl-transition-medium) opacity;
}

.dialog--open .dialog__overlay {
  opacity: 1;
}