/* general dialog styling */

html.no-scroll {
   overflow: hidden;
   background-color: red;
}

dialog {
   display: grid;
   background: var(--surface-2);
   color: var(--text-1);
   max-width: min(calc(100vw - 20px), var(--content));
   max-height: min(90vh, 100%);
   max-height: min(90dvb, 100%);
   margin: auto;
   padding: 0;
   position: fixed;
   inset: 0;
   border-radius: var(--radius-3);
   box-shadow: var(--box-shadow-1);
   z-index: 100;
   overflow: hidden;
   transition: opacity .5s var(--ease-3);
}

@media (prefers-reduced-motion: no-preference) {
   dialog {
      animation: var(--animation-scale-down) forwards;
      animation-timing-function: var(--ease-squish-3);
   }
}

@media (prefers-color-scheme: dark) {
   dialog {
      border-block-start: var(--border-size-1) solid var(--surface-3);
   }
}

@media (max-width: 767px) {
   dialog[modal-mode="mega"] {
      margin-block-end: 0;
      border-end-end-radius: 0;
      border-end-start-radius: 0;
   }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
   dialog[modal-mode="mega"] {
      animation: var(--animation-slide-out-down) forwards;
      animation-timing-function: var(--ease-squish-2);
   }
}

dialog:not([open]) {
   pointer-events: none;
   opacity: 0;
}

dialog[modal-mode="mega"]::backdrop {
   backdrop-filter: blur(25px);
}

dialog[modal-mode="mini"]::backdrop {
   backdrop-filter: none;
}

dialog::backdrop {
   transition: backdrop-filter .5s ease;
}

dialog[loading] {
   visibility: hidden;
}

@media (prefers-reduced-motion: no-preference) {
   dialog[open] {
      animation: var(--animation-slide-in-up) forwards;
   }
}

dialog > form {
   display: grid;
   grid-template-rows: auto 1fr auto;
   align-items: start;
   max-block-size: 80vh;
   max-block-size: 80dvb;
}

dialog > form > article {
   overflow-y: auto; 
   max-block-size: 100%; /* safari */
   overscroll-behavior-y: contain;
   display: grid;
   justify-items: flex-start;
   gap: var(--size-3);
   /* box-shadow: var(--shadow-2); */
   z-index: var(--layer-1);
   padding: 0.5em;
}

@media (prefers-color-scheme: light) {
   dialog > form > article {
      background: var(--surface-1);
   }

   dialog > form > article::-webkit-scrollbar {
      background: var(--surface-1);
   }
}

@media (prefers-color-scheme: dark) {
   dialog > form > article {
      border-block-start: var(--border-size-1) solid var(--surface-3);
   }
}

dialog > form > header {
   display: flex;
   gap: var(--size-3);
   justify-content: space-between;
   align-items: center;
   padding: 0.5em 1em;
   background-color: var(--surface-3);
}
dialog > form > header h3 {
   margin: 0;
}

dialog > form > header > button {
   border-radius: 50%;
   padding: .75ch;
   aspect-ratio: 1;
   flex-shrink: 0;
   place-items: center;
   stroke: currentColor;
   stroke-width: 3px;
}

dialog > form > footer {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5em;
   justify-content: space-between;
   align-items: flex-start;
   padding: 0.5em;
   background-color: var(--surface-3);
}

dialog > form > footer > menu {
   display: flex;
   flex-wrap: wrap;
   gap: 0.3em;
   margin: 0;
   padding: 0;
}

dialog > form > footer > menu:only-child {
   margin-inline-start: auto;
}
dialog > form > footer > menu > button {
   font-size: 0.8em;
}

dialog > form > footer > menu > button[type="submit"] {
   background-color: var(--primary);
}
dialog > form > footer > menu > button[type="reset"] {
   background-color: darkred;
}

@media (max-width: 410px) {
   dialog > form > footer > menu > button[type="reset"] {
      display: none;
   }
}

dialog > :is(header, footer) {
   background-color: var(--surface-2);
}

/* TranslationDialog */

.translation-dialog {
   padding: 0.5em;
   max-width: 400px;
   max-height: min(50vh, 50%);
   max-height: min(50dvb, 50%);
   display: grid;
   grid-template-rows: auto 1fr;
}
.translation-options {
   margin: 0;
   padding: 0;
   overflow-x: hidden;
   overflow-y: auto;
}
.translation-options > li {
   list-style: none;
   padding: 0.5em;
   display: grid;
   grid-template-columns: 1fr 1fr;
}
.translation-options > .translation-option { display: none; }
.translation-options > .translation-option.selected { display: grid; }
.translation-options > .translation-option.relevant { display: grid; }
.translation-dialog.showall > .translation-option { display: grid; }

.translation-options > .translation-option {
   grid-template-columns: auto 2fr 3fr;
   column-gap: 1ch;
   cursor: pointer;
}
.translation-options > .translation-option::before {
   content: "✓";
   width: 1.2em;
   height: 1.2em;
   display: flex;
   justify-content: center;
   align-items: center;
   border: 2px solid var(--text-1);
   border-radius: 50%;
   color: transparent;
   transition: color 0.5s ease, opacity 0.5s ease;
}
.translation-options > .translation-option:not(.selected):hover::before {
   content: "✓";
   opacity: 0.3;
   color: var(--text-1);
}
.translation-options > .translation-option.selected::before {
   content: "✓";
   color: var(--text-1);
}

input.manual-translation {
   background-color: var(--surface-1);
}

.more-translations.done {
   display: none;
}


/* GRAMMAR */
.grammar-substantiv {
   display: grid;
   grid-template-columns: auto 1fr 1fr;
   column-gap: 1em;
}
.grammar-adjective {
   display: grid;
   grid-template-columns: auto 1fr 1fr;
}