:host {
  display: block;
}

  :host * {
    box-sizing: border-box;
  }

.modal {
  --swirl-modal-height: auto;
  --swirl-modal-max-height: 90vh;
  --swirl-modal-view-height: 100vh;
  --swirl-modal-header-height: 3.75rem;

  --swirl-modal-max-width: 40rem;
  --swirl-modal-sidebar-width: 25rem;
  --swirl-modal-max-secondary-content-width: 24rem;
  --swirl-modal-footer-padding-small: var(--s-space-12) var(--s-space-16)
    max(env(safe-area-inset-bottom), var(--s-space-12)) var(--s-space-16);
  --swirl-modal-footer-padding-large: var(--s-space-16) var(--s-space-24)
    max(env(safe-area-inset-bottom), var(--s-space-16)) var(--s-space-24);
}

@supports (height: 100dvh) {

.modal {
    --swirl-modal-max-height: 90dvh;
    --swirl-modal-view-height: 100dvh
}
  }

.modal {

  position: fixed;
  z-index: var(--s-z-40);
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--swirl-modal-view-height);
  inset: 0;
  border: none;
  padding: 0;
  width: auto;
  background: transparent;
  max-width: none;
  max-height: none;
  overflow: visible;
}

/* Reset default dialog styles */

.modal::backdrop {
    display: none;
  }

.modal:not([open]) {
    display: none;
  }

.modal--variant-default.modal--closing {
    animation: 0.15s modal-fade-out;
    animation-fill-mode: forwards;
  }

@media (prefers-reduced-motion) {

.modal--variant-default.modal--closing {
      animation: none
  }
    }

.modal--variant-default:not(.modal--closing) .modal__backdrop {
      animation: 0.15s modal-backdrop-fade-in;
    }

@media (prefers-reduced-motion) {

.modal--variant-default:not(.modal--closing) .modal__backdrop {
        animation: none
    }
      }

.modal--variant-default:not(.modal--closing) .modal__body {
      animation: 0.15s modal-scale-in;
    }

@media (prefers-reduced-motion) {

.modal--variant-default:not(.modal--closing) .modal__body {
        animation: none
    }
      }

.modal--variant-drawer {
  justify-content: end;
  align-items: stretch;
}

.modal--variant-drawer.modal--closing {
    animation: 0.15s modal-drawer-slide-out;
    animation-fill-mode: forwards;
  }

@media (prefers-reduced-motion) {

.modal--variant-drawer.modal--closing {
      animation: none
  }
    }

@media (min-width: 768px) {

.modal--variant-drawer.modal--hide-label .modal__header-bar {
        height: auto;
        padding-top: var(--s-space-4);
        padding-bottom: var(--s-space-4)
    }
      }

.modal--variant-drawer .modal__backdrop {
    background-color: transparent;
    animation: none;
  }

.modal--variant-drawer .modal__body {
    height: 100%;
    max-height: none;
    border-radius: 0;
    animation: 0.15s modal-drawer-slide-in;
    box-shadow: var(--s-shadow-level-3);
  }

@media (prefers-reduced-motion) {

.modal--variant-drawer .modal__body {
      animation: none
  }
    }

.modal--variant-drawer .modal__header-bar {
    background-color: var(--s-surface-overlay-default);
  }

.modal--variant-drawer .modal__header-bar .modal__close-button {
      margin-left: calc(-1 * var(--s-space-8));
    }

.modal--variant-drawer .modal__header-bar .modal__fullscreen-button {
      display: none;
    }

@media (min-width: 768px) {

.modal--variant-drawer .modal__header-bar {
      flex-direction: row
  }
    }

@media (min-width: 768px) {

.modal--variant-drawer.modal--padded .modal__content {
      padding-top: var(--s-space-8)
  }
    }

.modal--padded .modal__content {
    padding-top: var(--s-space-24);
    padding-right: var(--s-space-16);
    padding-bottom: var(--s-space-24);
    padding-left: var(--s-space-16);
  }

@media (min-width: 768px) {

.modal--padded .modal__content {
      padding-top: 0;
      padding-right: var(--s-space-24);
      padding-bottom: var(--s-space-16);
      padding-left: var(--s-space-24)
  }
    }

@media (min-width: 768px) {

.modal--scrollable .modal__content {
      padding-bottom: 0
  }
    }

.modal--scrollable:not(.modal--scrolled-down).modal--has-custom-footer .modal__custom-footer {
        border-top: var(--s-border-width-default) solid var(--s-border-default);
      }

.modal--scrollable:not(.modal--scrolled-down):not(.modal--has-custom-footer) .modal__controls {
        border-top: var(--s-border-width-default) solid var(--s-border-default);
      }

.modal--has-custom-header .modal__custom-header {
    display: block;
  }

.modal--has-custom-header .modal__content {
    padding-top: var(--s-space-16);
  }

.modal--has-custom-footer .modal__custom-footer {
    padding: var(--swirl-modal-footer-padding-small);
  }

@media (min-width: 768px) {

.modal--has-custom-footer .modal__custom-footer {
      padding: var(--swirl-modal-footer-padding-large)
  }
    }

.modal--has-header-tools .modal__header {
    border-bottom-color: transparent;
  }

.modal--has-header-tools .modal__header-tools {
    display: block;
  }

.modal--has-secondary-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,
  .modal--has-secondary-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body {
    max-width: calc(
      var(--swirl-modal-max-width) +
        var(--swirl-modal-max-secondary-content-width)
    );
  }

.modal--has-secondary-content:not(.modal--has-header-tools):not(.modal--hide-secondary-content-borders)
    .modal__header {
    border-bottom-color: var(--s-border-default);
  }

.modal--has-secondary-content.modal--has-header-tools:not(.modal--hide-secondary-content-borders)
    .modal__header-tools {
    border-bottom-color: var(--s-border-default);
  }

.modal--has-secondary-content.modal--has-custom-footer:not(.modal--hide-secondary-content-borders) .modal__custom-footer {
      border-top: var(--s-border-width-default) solid var(--s-border-default);
    }

.modal--has-secondary-content:not(.modal--has-custom-footer):not(.modal--hide-secondary-content-borders) .modal__controls {
      border-top: var(--s-border-width-default) solid var(--s-border-default);
    }

@media (min-width: 992px) {

.modal--has-secondary-content .modal__header-tools,
  .modal--has-secondary-content .modal__content {
      padding-right: 0
  }
    }

.modal--has-secondary-content .modal__primary-content {
    overflow: visible;
    max-height: 60%;
    flex-basis: auto;
  }

@media (min-width: 992px) {

.modal--has-secondary-content .modal__primary-content {
      max-width: calc(100% - var(--swirl-modal-max-secondary-content-width));
      max-height: none;
      flex-basis: calc(100% - var(--swirl-modal-max-secondary-content-width))
  }
    }

.modal--has-secondary-content .modal__secondary-content {
    display: block;
  }

.modal__main-content {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-grow: 1;
}

.modal__sidebar {
  display: none;
}

.modal.modal--has-sidebar-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,
  .modal.modal--has-sidebar-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body {
    max-width: calc(
      var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width)
    );
  }

@media (min-width: 768px) {
    .modal.modal--has-sidebar-content .modal__sidebar {
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      flex-shrink: 0;
      width: var(--swirl-modal-sidebar-width);
      border-right: var(--s-border-width-default) solid var(--s-border-default);
    }

      .modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header {
        border-bottom: var(--s-border-width-default) solid transparent;
        display: flex;
        align-items: center;
        gap: var(--s-space-8);
        padding-right: var(--s-space-24);
        padding-left: var(--s-space-24);
      }

        .modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header.modal__sidebar-header--has-close-button {
          padding-left: var(--s-space-16);
        }

        .modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header .modal__sidebar-heading {
          display: flex;
          align-items: center;
          height: var(--swirl-modal-header-height);
        }

      .modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-content {
        display: block;
        flex-grow: 1;
        overflow-y: auto;
      }
  }

@media (min-width: 992px) {
    .modal.modal--has-sidebar-content .modal__primary-content {
      flex-basis: calc(100% - 20rem);
    }
  }

.modal--sidebar-padded .modal__sidebar .modal__sidebar-content {
      padding-left: var(--s-space-24);
      padding-right: var(--s-space-24);
      padding-bottom: var(--s-space-16);
      padding-top: var(--s-space-16);
    }

@media (min-width: 768px) {
    .modal--scrolled:not(.modal--hide-scrolled-header-border):not(.modal--has-header-tools) .modal__header {
      border-bottom-color: var(--s-border-default);
    }

    .modal--scrolled:not(.modal--hide-scrolled-header-border).modal--has-header-tools .modal__header-tools {
      border-bottom-color: var(--s-border-default);
    }

    .modal--scrolled:not(.modal--hide-scrolled-header-border) .modal__custom-header {
      border-bottom-color: var(--s-border-default);
    }
  }

@media (min-width: 768px) {
    .modal--sidebar-scrolled .modal__sidebar .modal__sidebar-header {
      border-bottom-color: var(--s-border-default);
    }
  }

.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer {
      padding: var(--swirl-modal-footer-padding-small);
    }

@media (min-width: 768px) {

.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer {
        padding: var(--swirl-modal-footer-padding-large)
    }
      }

@media (min-width: 768px) {

.modal--sidebar-scrollable .modal__sidebar-content {
      padding-bottom: 0 !important
  }
    }

.modal--sidebar-scrollable:not(.modal--sidebar-scrolled-down).modal--has-sidebar-footer .modal__sidebar-footer {
        border-top: var(--s-border-width-default) solid var(--s-border-default);
      }

.modal__backdrop {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.2);
  inset: 0;
}

.modal__body {
  --swirl-card-background-default: var(--s-surface-overlay-default);
  --swirl-card-background-hovered: var(--s-surface-overlay-hovered);
  --swirl-card-background-pressed: var(--s-surface-overlay-pressed);
  position: relative;
  z-index: var(--s-z-40);
  display: flex;
  flex-direction: row;
  overflow: hidden;
  width: 100vw;
  max-width: 100vw;
  height: var(--swirl-modal-view-height);
  max-height: var(--swirl-modal-view-height);
  background-color: var(--s-surface-overlay-default);
}

.modal--fullscreen .modal__body {
  min-height: var(--swirl-modal-view-height);
}

.modal--fullscreen-transitioning .modal__body {
  transition: width 0.15s ease-out, max-width 0.15s ease-out,
    max-height 0.15s ease-out, min-height 0.15s ease-out;
}

@media (min-width: 768px) {

.modal.modal--variant-default:not(.modal--fullscreen) .modal__body {
      width: 90vw;
      max-width: var(--swirl-modal-max-width);
      max-height: var(--swirl-modal-max-height);
      min-height: 0;
      border-radius: var(--s-border-radius-base);
      box-shadow: var(--s-shadow-level-3)
  }
    }

@media (min-width: 992px) {

.modal.modal--variant-default:not(.modal--fullscreen) .modal__body {
      height: var(--swirl-modal-height)
  }
    }

.modal__header {
  border-bottom: var(--s-border-width-default) solid var(--s-border-default);
}

@media (min-width: 768px) {

.modal__header {
    border-bottom: var(--s-border-width-default) solid transparent
}
  }

.modal__header-bar {
  display: flex;
  height: 3.5rem;
  padding-top: var(--s-space-8);
  padding-right: var(--s-space-16);
  padding-bottom: var(--s-space-8);
  padding-left: var(--s-space-16);
  flex-shrink: 0;
  align-items: center;
  gap: var(--s-space-8);
}

@media (min-width: 768px) {

.modal__header-bar {
    height: var(--swirl-modal-header-height);
    padding-top: var(--s-space-12);
    padding-right: var(--s-space-24);
    padding-bottom: var(--s-space-12);
    padding-left: var(--s-space-24);
    flex-direction: row-reverse
}
  }

.modal__fullscreen-button {
  display: none;
}

@media (min-width: 768px) {

.modal__fullscreen-button {
    display: block
}
  }

.modal__header-tools {
  display: none;
  padding-right: var(--s-space-16);
  padding-left: var(--s-space-16);
  border-bottom: var(--s-border-width-default) solid var(--s-border-default);
}

@media (min-width: 768px) {

.modal__header-tools {
    padding-right: var(--s-space-24);
    padding-left: var(--s-space-24);
    border-bottom-color: transparent
}
  }

.modal__custom-header {
  display: none;
  flex-shrink: 0;
  border-bottom: var(--s-border-width-default) solid var(--s-border-default);
}

@media (min-width: 768px) {

.modal__custom-header {
    border-bottom-color: transparent
}
  }

.modal__heading {
  overflow: hidden;
}

.modal__heading .heading {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

.modal__content-container {
  display: flex;
  overflow: hidden;
  flex-grow: 1;
  flex-direction: column;
  gap: var(--s-space-24);
}

@media (min-width: 992px) {

.modal__content-container {
    flex-direction: row
}
  }

.modal__primary-content {
  display: flex;
  overflow: hidden;
  overflow-y: auto;
  min-width: 0;
  flex-basis: 100%;
  flex-grow: 1;
  flex-direction: column;
}

.modal__content {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
}

.modal__content ::slotted(*) {
    margin: 0;
  }

.modal__secondary-content {
  display: none;
  overflow: visible;
  overflow-x: hidden;
  overflow-y: auto;
  min-width: 0;
  max-width: none;
  max-height: 40%;
  padding-right: var(--s-space-16);
  padding-left: var(--s-space-16);
}

@media (min-width: 768px) {

.modal__secondary-content {
    padding-left: var(--s-space-24)
}
  }

@media (min-width: 992px) {

.modal__secondary-content {
    overflow-x: hidden;
    overflow-y: auto;
    max-width: var(--swirl-modal-max-secondary-content-width);
    max-height: none;
    padding-right: var(--s-space-24);
    padding-bottom: var(--s-space-16);
    padding-left: 0;
    flex-basis: 50%;
    flex-grow: 1
}
  }

.modal__custom-footer {
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom);
}

.modal__controls {
  display: flex;
  padding: var(--swirl-modal-footer-padding-small);
  flex-shrink: 0;
  justify-content: flex-end;
}

@media (min-width: 768px) {

.modal__controls {
    padding: var(--swirl-modal-footer-padding-large)
}
  }

.modal--has-secondary-content.modal--has-sidebar-content:not(.modal--fullscreen) .modal__body {
    max-width: calc(
      var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width) +
        var(--swirl-modal-max-secondary-content-width)
    );
  }

@keyframes modal-scale-in {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

@keyframes modal-backdrop-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modal-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes modal-drawer-slide-in {
  from {
    transform: translate3d(100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes modal-drawer-slide-out {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(100%, 0, 0);
  }
}