:root {
  --selection-dialog-in-time: 0.25s;
  --selection-dialog-out-time: 0.25s;
  --selection-dialog-in-fun: ease-out;
  --selection-dialog-out-fun: ease-in;

  --selection-dialog-bg: var(--main-bg);
  --selection-dialog-text: var(--main-text);
  --selection-dialog-text-hover: var(--profile-1);
  --selection-dialog-border: var(--main-text);
  --selection-dialog-margin: 1rem;
  --selection-dialog-border-radius: 1rem;
  --selection-dialog-option-border: var(--profile-5);

  --selection-dialog-wrapper-z-index: calc(var(--header-z-index) + 1);
  --selection-dialog-z-index: calc(var(--selection-dialog-wrapper-z-index) + 1);
}

.selection-dialog-wrapper {
  position: fixed;
  top: 0;
  z-index: var(--selection-dialog-wrapper-z-index);
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: hidden;
  user-select: none;
}
.selection-dialog-wrapper:not(.preshow) {
  display: none;
}

.selection-dialog-wrapper > .background {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: var(--blocking-message-bg);
  opacity: 0;
  transition:
    all var(--selection-dialog-out-time) var(--selection-dialog-out-fun);
}
.selection-dialog-wrapper.showing > .background {
  opacity: .3;
  transition:
    all var(--selection-dialog-in-time) var(--selection-dialog-in-fun);
}

.selection-dialog-wrapper > .dialog {
  z-index: var(--selection-dialog-z-index);
  flex: 1;
  margin: var(--selection-dialog-margin);
  max-width: 30rem;
  max-height: calc(100% - 2 * var(--selection-dialog-margin));
  display: grid;
  grid-template-areas:
    "."
    "content"
    "footer";
    grid-template-rows:
      var(--selection-dialog-border-radius)
      minmax(auto, calc(100% - 2 * var(--selection-dialog-margin)))
      auto;
  background-color: var(--selection-dialog-bg);
  color: var(--selection-dialog-text);
  border: 1px solid var(--selection-dialog-border);
  border-radius: var(--selection-dialog-border-radius);
  transition:
    all var(--selection-dialog-out-time) var(--selection-dialog-out-fun);
}
.selection-dialog-wrapper:not(.showing) .dialog {
  margin-top: 100%;
  opacity: 0;
}
.selection-dialog-wrapper.showing .dialog {
  transition:
    all var(--selection-dialog-in-time) var(--selection-dialog-in-fun);
}

.selection-dialog-wrapper > .dialog > .content {
  grid-area: content;
  overflow-y: auto;
  padding: 0 1rem;
}
.selection-dialog-wrapper > .dialog > .content > a {
  display: block;
  font-family: var(--bold-font-family);
  font-weight: var(--bold-font-weight);
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid var(--selection-dialog-option-border);
  padding: .2em 0;
  color: var(--selection-dialog-text);
}
.selection-dialog-wrapper > .dialog > .content > a:last-child {
  border-bottom-width: 0;
}
.selection-dialog-wrapper > .dialog > .content > a:active,
.selection-dialog-wrapper > .dialog > .content > a:focus,
.selection-dialog-wrapper > .dialog > .content > a:hover {
  color: var(--selection-dialog-text-hover);
}

.selection-dialog-wrapper > .dialog > .footer {
  grid-area: footer;
  padding: 1rem;
  text-align: center;
}