:root {
  --max-width-navigation: 89.5rem;

  --max-width-spacing: calc(var(--Space-x2) * 2);
  --max-width-page: min(
    calc(100dvw - var(--max-width-spacing)),
    var(--max-width-navigation)
  );
}
.overlay {
  background: rgba(0, 0, 0, 0.5);
  height: var(--visual-viewport-height);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 100;
}

.modal {
  background-color: var(--Neutral-0);
  border-radius: var(--Corner-radius-md) var(--Corner-radius-md) 0 0;
  box-shadow: 0px 4px 24px 0px rgba(38, 32, 30, 0.08);
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 101;
}

.dialog {
  display: flex;
  flex-direction: column;

  /* For removing focus outline when modal opens first time */
  outline: 0 none;

  /* for supporting animations within content */
  position: relative;
  overflow: hidden;

  max-height: 100dvh;
}

.header {
  box-sizing: content-box;
  display: flex;
  align-items: flex-start;
  gap: var(--Space-x3);
  justify-content: space-between;
  min-height: min-content;
  position: relative;
  padding: var(--Space-x3) var(--Space-x3) 0;
}

.content {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  gap: var(--Space-x2);
  overflow: auto;
  padding: var(--Space-x3);
}

.close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

@media screen and (min-width: 768px) {
  :root {
    --max-width-spacing: calc(var(--Space-x3) * 2);
  }
  .overlay {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .modal {
    left: auto;
    bottom: auto;
    width: auto;
    border-radius: var(--Corner-radius-md);
    max-width: var(--max-width-page);
  }

  .dialog {
    max-height: 90dvh;
  }
}

@media screen and (min-width: 1367px) {
  :root {
    --max-width-spacing: calc(var(--Space-x5) * 2);
  }
}