: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-text-disabled: var(--button-text-disabled);
  --selection-dialog-border: var(--main-text);
  --selection-dialog-margin: 1rem;
  --selection-dialog-border-radius: 1rem;
  --selection-dialog-group-border: var(--profile-7);

  --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 > .option {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .2em 0;
  padding-left: 1.4rem; /* To compensate for the loading symbol to the right so
                         * the link appears centered in the dialog */
}
.selection-dialog-wrapper > .dialog > .content > .option.clickable:hover {
  cursor: pointer;
}
.selection-dialog-wrapper > .dialog > .content > .option.is-hidden {
  display: none;
}
.selection-dialog-wrapper > .dialog > .content > .option.is-loading > a,
.selection-dialog-wrapper > .dialog > .content > .option.is-loading > a:active,
.selection-dialog-wrapper > .dialog > .content > .option.is-loading > a:focus,
.selection-dialog-wrapper > .dialog > .content > .option.is-loading > a:hover,
.selection-dialog-wrapper > .dialog > .content > .option.is-disabled > a,
.selection-dialog-wrapper > .dialog > .content > .option.is-disabled > a:active,
.selection-dialog-wrapper > .dialog > .content > .option.is-disabled > a:focus,
.selection-dialog-wrapper > .dialog > .content > .option.is-disabled > a:hover,
.selection-dialog-wrapper > .dialog > .content > .option.clickable.is-loading,
.selection-dialog-wrapper > .dialog > .content >
  .option.clickable.is-loading:hover > a,
.selection-dialog-wrapper > .dialog > .content > .option.clickable.is-disabled,
.selection-dialog-wrapper > .dialog > .content >
  .option.clickable.is-disabled:hover > a {
  color: var(--selection-dialog-text-disabled);
  cursor: default;
}
.selection-dialog-wrapper > .dialog > .content > .option > svg.loading {
  margin-left: .4rem;
  visibility: hidden;
}
.selection-dialog-wrapper > .dialog > .content > .option.is-loading >
  svg.loading
{
  visibility: visible;
}
.selection-dialog-wrapper > .dialog > .content > .option > a {
  color: var(--selection-dialog-text);
  font-size: 1rem;
}
.selection-dialog-wrapper > .dialog > .content > .option > a:active,
.selection-dialog-wrapper > .dialog > .content > .option > a:focus,
.selection-dialog-wrapper > .dialog > .content > .option > a:hover,
.selection-dialog-wrapper > .dialog > .content > .option.clickable:hover > a {
  color: var(--selection-dialog-text-hover);
}
.selection-dialog-wrapper > .dialog > .content > .option.clickable:hover > a {
  transition: all var(--hover-in-time) var(--hover-in-fun);
}
.selection-dialog-wrapper > .dialog > .content > .option.clickable > a {
  transition: all var(--hover-out-time) var(--hover-out-fun);
}

.selection-dialog-wrapper > .dialog > .content > .group-sep {
  margin: .5rem 0;
  border-top: 1px solid var(--selection-dialog-group-border);
}

.selection-dialog-wrapper > .dialog > .content > .msg {
  text-align: center;
}

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