.fizz-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  padding: $spacing-16;
  z-index: $elevation-overlay;
}

.fizz-modal.fizz-is-open {
  display: block;
}

.fizz-modal-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: $color-background-overlay;
  z-index: $elevation-overlay;
}

.fizz-modal-content {
  position: relative;
  background-color: $color-background-surface;
  border-radius: $border-radius-medium;
  border: $border-width-thin solid $color-border-default;
  margin-left: auto;
  margin-right: auto;
  max-width: 1080px;
  max-height: calc(100vh - #{$spacing-32});
  overflow: hidden;
  z-index: $elevation-modal;
  box-shadow: $elevation-modal-shadow;
}

.fizz-modal-content > .fizz-layout-fixed-header-and-sidebar,
.fizz-modal-content > .fizz-layout-fixed-header-and-footer {
  max-height: calc(100vh - #{$spacing-32});
}

.fizz-modal-content > .fizz-layout-fixed-header-and-sidebar [data-grid-area="main"] {
  max-height: calc(100vh - 194px);
}

.fizz-modal-content > .fizz-layout-fixed-header-and-footer [data-grid-area="aside"],
.fizz-modal-content > .fizz-layout-fixed-header-and-footer [data-grid-area="main"] {
  max-height: calc(100vh - 194px);
}

.fizz-modal-wide {
  grid-template-columns: 1fr minmax(min-content, 850px) 1fr;
}

.fizz-modal-large .fizz-modal-content {
  max-width: 720px;
}

.fizz-modal-medium .fizz-modal-content {
  max-width: 480px;
}

.fizz-modal-small .fizz-modal-content {
  max-width: 360px;
}

.fizz-modal-small [data-grid-area="main"] {
  min-height: 200px;
}

.fizz-modal-wide .fizz-modal-content {
  padding: $spacing-32;
}

.fizz-modal-header {
  padding: $spacing-24 $spacing-64 $spacing-24 $spacing-24;
  position: relative;
}

.fizz-modal-main {
  padding: 0 $spacing-24 $spacing-24 $spacing-24;
}

.fizz-modal-footer {
  padding: 0 $spacing-24 $spacing-24 $spacing-24;
}

.fizz-modal-close {
  position: absolute;
  top: 50%;  
  right: $spacing-24;
  transform: translateY(-50%);
}

@media (min-width: $breakpoint-m) {
  .fizz-modal-content {
    margin-top: 10vh;
    max-height: 80vh;
  }

  .fizz-modal-wide .fizz-modal-content {
    padding: $spacing-64 $spacing-128;
    grid-column-start: 2;
  }

  .fizz-modal-content > .fizz-layout-fixed-header-and-sidebar,
  .fizz-modal-content > .fizz-layout-fixed-header-and-footer {
    max-height: 80vh;
  }

  .fizz-modal-content > .fizz-layout-fixed-header-and-sidebar [data-grid-area="aside"],
  .fizz-modal-content > .fizz-layout-fixed-header-and-footer [data-grid-area="aside"] {
    max-height: 100%;
  }

}