dso-toolkit 93.0.0 → 94.0.0

package/dist/dso.css

@@ -1,5 +1,5 @@
 :root {
-  --dso-toolkit-version: "93.0.0";
+  --dso-toolkit-version: "94.0.0";
 }
 
 @font-face {
@@ -1122,7 +1122,7 @@ label.dso-primary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -1153,11 +1153,13 @@ label.dso-primary {
   background-color: var(--_dso-button-primary-background-color, #39870c);
   border-color: var(--_dso-button-primary-border-color, #39870c);
   color: var(--_dso-button-primary-color, #fff);
+  float: var(--_dt-button-float-primary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: 56px;
+  inline-size: var(--_dt-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -1167,6 +1169,7 @@ label.dso-primary:hover {
   background-color: var(--_dso-button-primary-hover-background-color, #275937);
   border-color: var(--_dso-button-primary-hover-border-color, #275937);
   color: var(--_dso-button-primary-hover-color, #fff);
+  float: var(--_dt-button-float-primary, none);
 }
 a.dso-primary:active,
 button.dso-primary:active,
@@ -1174,6 +1177,7 @@ label.dso-primary:active {
   background-color: var(--_dso-button-primary-active-background-color, #173521);
   border-color: var(--_dso-button-primary-active-border-color, #173521);
   color: var(--_dso-button-primary-active-color, #fff);
+  float: var(--_dt-button-float-primary, none);
 }
 a.dso-primary[disabled], a.dso-primary[disabled]:hover,
 button.dso-primary[disabled],
@@ -1183,6 +1187,7 @@ label.dso-primary[disabled]:hover {
   background-color: var(--_dso-button-primary-disabled-background-color, #afcf9d);
   border-color: var(--_dso-button-primary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-primary-disabled-color, #fff);
+  float: var(--_dt-button-float-primary, none);
 }
 a.dso-primary.dso-small,
 button.dso-primary.dso-small,
@@ -1323,7 +1328,7 @@ label.dso-secondary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -1354,11 +1359,13 @@ label.dso-secondary {
   background-color: var(--_dso-button-secondary-background-color, #fff);
   border-color: var(--_dso-button-secondary-border-color, #39870c);
   color: var(--_dso-button-secondary-color, #39870c);
+  float: var(--_dt-button-float-secondary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: 56px;
+  inline-size: var(--_dt-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -1368,6 +1375,7 @@ label.dso-secondary:hover {
   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
   border-color: var(--_dso-button-secondary-hover-border-color, #275937);
   color: var(--_dso-button-secondary-hover-color, #275937);
+  float: var(--_dt-button-float-secondary, none);
 }
 a.dso-secondary:active,
 button.dso-secondary:active,
@@ -1375,6 +1383,7 @@ label.dso-secondary:active {
   background-color: var(--_dso-button-secondary-active-background-color, #275937);
   border-color: var(--_dso-button-secondary-active-border-color, #275937);
   color: var(--_dso-button-secondary-active-color, #fff);
+  float: var(--_dt-button-float-secondary, none);
 }
 a.dso-secondary[disabled], a.dso-secondary[disabled]:hover,
 button.dso-secondary[disabled],
@@ -1384,6 +1393,7 @@ label.dso-secondary[disabled]:hover {
   background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
   border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-secondary-disabled-color, #afcf9d);
+  float: var(--_dt-button-float-secondary, none);
 }
 a.dso-secondary.dso-small,
 button.dso-secondary.dso-small,
@@ -1580,7 +1590,7 @@ label.dso-tertiary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -1614,7 +1624,7 @@ label.dso-tertiary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -1645,11 +1655,13 @@ label.dso-tertiary {
   background-color: var(--_dso-button-tertiary-background-color, );
   border-color: var(--_dso-button-tertiary-border-color, );
   color: var(--_dso-button-tertiary-color, #39870c);
+  float: var(--_dt-button-float-tertiary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: auto;
+  inline-size: var(--_dt-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -1659,6 +1671,7 @@ label.dso-tertiary:hover {
   background-color: var(--_dso-button-tertiary-hover-background-color, );
   border-color: var(--_dso-button-tertiary-hover-border-color, );
   color: var(--_dso-button-tertiary-hover-color, #275937);
+  float: var(--_dt-button-float-tertiary, none);
 }
 a.dso-tertiary:active,
 button.dso-tertiary:active,
@@ -1666,6 +1679,7 @@ label.dso-tertiary:active {
   background-color: var(--_dso-button-tertiary-active-background-color, );
   border-color: var(--_dso-button-tertiary-active-border-color, );
   color: var(--_dso-button-tertiary-active-color, #173521);
+  float: var(--_dt-button-float-tertiary, none);
 }
 a.dso-tertiary[disabled], a.dso-tertiary[disabled]:hover,
 button.dso-tertiary[disabled],
@@ -1675,6 +1689,7 @@ label.dso-tertiary[disabled]:hover {
   background-color: var(--_dso-button-tertiary-disabled-background-color, );
   border-color: var(--_dso-button-tertiary-disabled-border-color, );
   color: var(--_dso-button-tertiary-disabled-color, #afcf9d);
+  float: var(--_dt-button-float-tertiary, none);
 }
 a.dso-tertiary.dso-small,
 button.dso-tertiary.dso-small,
@@ -1760,7 +1775,8 @@ button.dso-tertiary,
 label.dso-tertiary {
   border: 0;
   line-height: 1;
-  padding: 0;
+  padding-inline: 0;
+  padding-block: var(--_dt-button-padding-block-tertiary, 0);
   background-color: transparent;
 }
 a.dso-tertiary[disabled].dso-spinner-left, a.dso-tertiary[disabled].dso-spinner-right,
@@ -1905,7 +1921,7 @@ label.dso-map {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -1928,11 +1944,13 @@ label.dso-map {
   background-color: var(--_dso-button-secondary-background-color, #fff);
   border-color: var(--_dso-button-secondary-border-color, #39870c);
   color: var(--_dso-button-secondary-color, #39870c);
+  float: var(--_dt-button-float-secondary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: 56px;
+  inline-size: var(--_dt-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -1942,6 +1960,7 @@ label.dso-map:hover {
   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
   border-color: var(--_dso-button-secondary-hover-border-color, #275937);
   color: var(--_dso-button-secondary-hover-color, #275937);
+  float: var(--_dt-button-float-secondary, none);
 }
 a.dso-map:active,
 button.dso-map:active,
@@ -1949,6 +1968,7 @@ label.dso-map:active {
   background-color: var(--_dso-button-secondary-active-background-color, #275937);
   border-color: var(--_dso-button-secondary-active-border-color, #275937);
   color: var(--_dso-button-secondary-active-color, #fff);
+  float: var(--_dt-button-float-secondary, none);
 }
 a.dso-map[disabled], a.dso-map[disabled]:hover,
 button.dso-map[disabled],
@@ -1958,6 +1978,7 @@ label.dso-map[disabled]:hover {
   background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
   border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-secondary-disabled-color, #afcf9d);
+  float: var(--_dt-button-float-secondary, none);
 }
 a.dso-map.dso-small,
 button.dso-map.dso-small,
@@ -2164,7 +2185,8 @@ a.dso-tertiary, a.dso-tertiary:visited {
 .dso-tertiary + .dso-primary,
 .dso-tertiary + .dso-secondary,
 .dso-tertiary + .dso-tertiary {
-  margin-inline-start: 16px;
+  margin-block-start: var(--_dt-button-after-button-margin-block-start, 0);
+  margin-inline-start: var(--_dt-button-after-button-margin-inline-start, 16px);
 }
 
 .dso-button-row {
@@ -2693,9 +2715,9 @@ del {
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
   text-decoration: line-through;
-  --_dso-ozon-content-toggletip-text-decoration: underline line-through;
+  --_dt-ozon-content-toggletip-text-decoration: underline line-through;
 }
 @media screen and (min--moz-device-pixel-ratio: 0) {
   del {
@@ -3045,7 +3067,7 @@ dso-document-component[not-applicable] dso-document-component[not-applicable] {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -3079,7 +3101,7 @@ dso-document-component[not-applicable] dso-document-component[not-applicable] {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -3110,11 +3132,13 @@ dso-document-component[not-applicable] dso-document-component[not-applicable] {
   background-color: var(--_dso-button-tertiary-background-color, );
   border-color: var(--_dso-button-tertiary-border-color, );
   color: var(--_dso-button-tertiary-color, #39870c);
+  float: var(--_dt-button-float-tertiary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: auto;
+  inline-size: var(--_dt-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -3124,6 +3148,7 @@ dso-document-component[not-applicable] dso-document-component[not-applicable] {
   background-color: var(--_dso-button-tertiary-hover-background-color, );
   border-color: var(--_dso-button-tertiary-hover-border-color, );
   color: var(--_dso-button-tertiary-hover-color, #275937);
+  float: var(--_dt-button-float-tertiary, none);
 }
 .dso-document-header .dso-document-header-map-action:active,
 .dso-document-header .dso-document-header-toggle-features:active,
@@ -3131,6 +3156,7 @@ dso-document-component[not-applicable] dso-document-component[not-applicable] {
   background-color: var(--_dso-button-tertiary-active-background-color, );
   border-color: var(--_dso-button-tertiary-active-border-color, );
   color: var(--_dso-button-tertiary-active-color, #173521);
+  float: var(--_dt-button-float-tertiary, none);
 }
 .dso-document-header .dso-document-header-map-action[disabled], .dso-document-header .dso-document-header-map-action[disabled]:hover,
 .dso-document-header .dso-document-header-toggle-features[disabled],
@@ -3140,6 +3166,7 @@ dso-document-component[not-applicable] dso-document-component[not-applicable] {
   background-color: var(--_dso-button-tertiary-disabled-background-color, );
   border-color: var(--_dso-button-tertiary-disabled-border-color, );
   color: var(--_dso-button-tertiary-disabled-color, #afcf9d);
+  float: var(--_dt-button-float-tertiary, none);
 }
 .dso-document-header .dso-document-header-map-action.dso-small,
 .dso-document-header .dso-document-header-toggle-features.dso-small,
@@ -3225,7 +3252,8 @@ dso-document-component[not-applicable] dso-document-component[not-applicable] {
 .dso-document-header .dso-document-header-toggle-status {
   border: 0;
   line-height: 1;
-  padding: 0;
+  padding-inline: 0;
+  padding-block: var(--_dt-button-padding-block-tertiary, 0);
   background-color: transparent;
 }
 .dso-document-header .dso-document-header-map-action[disabled].dso-spinner-left, .dso-document-header .dso-document-header-map-action[disabled].dso-spinner-right,
@@ -6208,7 +6236,7 @@ dso-info {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -6313,7 +6341,7 @@ ins {
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
 }
 
 .dso-justify-form-groups {
@@ -6406,6 +6434,7 @@ ins {
 }
 
 a {
+  overflow-wrap: anywhere;
   background-color: transparent;
   color: var(--link-color);
   text-decoration: underline;
@@ -6748,326 +6777,6 @@ mark.dso-highlight {
   background-color: #dbd136;
 }
 
-@keyframes ModalFadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-body:has(dialog[open]),
-body:has(dso-modal.hydrated) {
-  overflow: hidden;
-}
-
-.dso-modal {
-  overflow: visible;
-  padding: 0;
-  border: 0;
-}
-.dso-modal::backdrop {
-  background-color: rgba(255, 255, 255, 0.8);
-}
-.dso-modal .dso-dialog {
-  inline-size: 640px;
-  background-color: #fff;
-  opacity: 1;
-  box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);
-  animation: 200ms ease-out 0s 1 ModalFadeIn;
-}
-.dso-modal .dso-header {
-  position: relative;
-  padding: 16px;
-  border-block-end: 1px solid #ccc;
-}
-.dso-modal .dso-header h2 {
-  max-inline-size: calc(100% - 24px);
-  margin: 0;
-  color: #275937;
-}
-.dso-modal .dso-header .dso-close {
-  position: absolute;
-  inset-block-start: 16px;
-  inset-inline-end: 13px;
-  block-size: 32px;
-  inline-size: 32px;
-  padding: 0;
-  background-color: transparent;
-  border: 0;
-  text-align: center;
-}
-.dso-modal > .dso-dialog > .dso-body p {
-  margin-block: 0 var(--_dt-rich-content-margin-block, 16px);
-  margin-inline: 0;
-}
-.dso-modal > .dso-dialog > .dso-body ul,
-.dso-modal > .dso-dialog > .dso-body ol {
-  margin-block-end: 16px;
-}
-.dso-modal > .dso-dialog > .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),
-.dso-modal > .dso-dialog > .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {
-  padding-inline-start: 24px;
-}
-.dso-modal > .dso-dialog > .dso-body ul ul,
-.dso-modal > .dso-dialog > .dso-body ul ol,
-.dso-modal > .dso-dialog > .dso-body ol ul,
-.dso-modal > .dso-dialog > .dso-body ol ol {
-  margin-block-end: 0;
-}
-.dso-modal > .dso-dialog > .dso-body pre {
-  margin-block: 0 16px;
-  margin-inline: 0;
-}
-.dso-modal > .dso-dialog > .dso-body blockquote {
-  padding-block: 16px;
-  padding-inline: 24px;
-}
-.dso-modal > .dso-dialog > .dso-body dso-highlight-box,
-.dso-modal > .dso-dialog > .dso-body .dso-highlight-box {
-  margin-block-end: 24px;
-}
-.dso-modal > .dso-dialog > .dso-body img {
-  block-size: auto;
-  max-inline-size: 100%;
-}
-.dso-modal > .dso-dialog > .dso-body {
-  block-size: calc(100% - 96px - 1.5rem);
-  max-block-size: calc(70vh - 144px - 1.5em);
-  min-block-size: 1.5rem;
-  overflow-x: auto;
-  padding: 32px;
-}
-.dso-modal > .dso-dialog > dso-scrollable {
-  block-size: calc(100% - 96px - 1.5rem);
-  max-block-size: calc(70vh - 144px - 1.5em);
-  min-block-size: 6.5rem;
-}
-.dso-modal > .dso-dialog > dso-scrollable .dso-body p {
-  margin-block: 0 var(--_dt-rich-content-margin-block, 16px);
-  margin-inline: 0;
-}
-.dso-modal > .dso-dialog > dso-scrollable .dso-body ul,
-.dso-modal > .dso-dialog > dso-scrollable .dso-body ol {
-  margin-block-end: 16px;
-}
-.dso-modal > .dso-dialog > dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),
-.dso-modal > .dso-dialog > dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {
-  padding-inline-start: 24px;
-}
-.dso-modal > .dso-dialog > dso-scrollable .dso-body ul ul,
-.dso-modal > .dso-dialog > dso-scrollable .dso-body ul ol,
-.dso-modal > .dso-dialog > dso-scrollable .dso-body ol ul,
-.dso-modal > .dso-dialog > dso-scrollable .dso-body ol ol {
-  margin-block-end: 0;
-}
-.dso-modal > .dso-dialog > dso-scrollable .dso-body pre {
-  margin-block: 0 16px;
-  margin-inline: 0;
-}
-.dso-modal > .dso-dialog > dso-scrollable .dso-body blockquote {
-  padding-block: 16px;
-  padding-inline: 24px;
-}
-.dso-modal > .dso-dialog > dso-scrollable .dso-body dso-highlight-box,
-.dso-modal > .dso-dialog > dso-scrollable .dso-body .dso-highlight-box {
-  margin-block-end: 24px;
-}
-.dso-modal > .dso-dialog > dso-scrollable .dso-body img {
-  block-size: auto;
-  max-inline-size: 100%;
-}
-.dso-modal > .dso-dialog > dso-scrollable .dso-body {
-  padding: 32px;
-}
-.dso-modal .dso-body:focus-visible {
-  outline: none;
-}
-@media screen and (max-width: 767px) {
-  .dso-modal .dso-footer .dso-primary + .dso-primary, .dso-modal .dso-footer .dso-primary + .dso-secondary, .dso-modal .dso-footer .dso-primary + .dso-tertiary, .dso-modal .dso-footer .dso-secondary + .dso-primary, .dso-modal .dso-footer .dso-secondary + .dso-secondary, .dso-modal .dso-footer .dso-secondary + .dso-tertiary, .dso-modal .dso-footer .dso-tertiary + .dso-primary, .dso-modal .dso-footer .dso-tertiary + .dso-secondary, .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {
-    margin-inline-start: 0;
-  }
-  .dso-modal .dso-footer button {
-    inline-size: 100%;
-    text-align: center;
-  }
-  .dso-modal .dso-footer button + button {
-    margin-block-start: 8px;
-  }
-  .dso-modal .dso-footer button.dso-tertiary,
-  .dso-modal .dso-footer button.dso-tertiary span {
-    float: none;
-  }
-}
-.dso-modal .dso-footer {
-  min-block-size: 80px;
-  padding-block: 16px;
-  padding-inline: 32px;
-  text-align: end;
-}
-@media screen and (min-width: 768px) {
-  .dso-modal .dso-footer .dso-primary + .dso-secondary, .dso-modal .dso-footer .dso-secondary + .dso-secondary, .dso-modal .dso-footer .dso-tertiary + .dso-secondary {
-    margin-inline-start: 16px;
-  }
-  .dso-modal .dso-footer .dso-primary + .dso-tertiary, .dso-modal .dso-footer .dso-secondary + .dso-tertiary, .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {
-    margin-inline-start: 0;
-  }
-}
-@media screen and (max-width: 767px) {
-  .dso-modal .dso-dialog {
-    max-inline-size: 100%;
-    margin-block-start: 0;
-  }
-  .dso-modal .dso-footer .dso-primary + .dso-primary, .dso-modal .dso-footer .dso-primary + .dso-secondary, .dso-modal .dso-footer .dso-primary + .dso-tertiary, .dso-modal .dso-footer .dso-secondary + .dso-primary, .dso-modal .dso-footer .dso-secondary + .dso-secondary, .dso-modal .dso-footer .dso-secondary + .dso-tertiary, .dso-modal .dso-footer .dso-tertiary + .dso-primary, .dso-modal .dso-footer .dso-tertiary + .dso-secondary, .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {
-    margin-inline-start: 0;
-  }
-  .dso-modal .dso-footer button {
-    inline-size: 100%;
-    text-align: center;
-  }
-  .dso-modal .dso-footer button + button {
-    margin-block-start: 8px;
-  }
-  .dso-modal .dso-footer button.dso-tertiary,
-  .dso-modal .dso-footer button.dso-tertiary span {
-    float: none;
-  }
-}
-@media screen and (max-height: 380px) {
-  .dso-modal .dso-dialog {
-    min-block-size: 216px;
-    margin-block-start: 8px;
-    margin-block-end: 8px;
-  }
-  .dso-modal .dso-header {
-    padding-block: 8px;
-    padding-inline: 16px;
-  }
-  .dso-modal .dso-header .dso-close {
-    inset-block-start: 8px;
-  }
-  .dso-modal .dso-body {
-    padding-block: 16px;
-    padding-inline: 24px;
-  }
-  .dso-modal .dso-footer {
-    min-block-size: auto;
-    overflow: auto;
-    padding-block: 8px;
-    padding-inline: 32px;
-  }
-}
-.dso-modal.dso-fullscreen {
-  inline-size: 100dvi;
-  block-size: 100dvb;
-}
-.dso-modal.dso-fullscreen .dso-dialog {
-  display: flex;
-  flex-direction: column;
-  inline-size: 100%;
-  block-size: 100%;
-}
-.dso-modal.dso-fullscreen .dso-dialog > dso-scrollable {
-  flex-grow: 1;
-  max-block-size: unset;
-}
-.dso-modal.dso-fullscreen .dso-footer {
-  flex-shrink: 0;
-}
-.dso-modal .dso-close::before {
-  background: url("./di.svg#cross") no-repeat center;
-  background-size: cover;
-  block-size: 24px;
-  vertical-align: middle;
-  inline-size: 24px;
-  content: "";
-  display: inline-block;
-}
-.dso-modal .dso-footer .dso-tertiary {
-  float: inline-start;
-  line-height: calc(1.5em - 1px);
-  padding-block: 11px;
-  padding-inline: 0;
-  position: relative;
-}
-@media screen and (max-width: 480px) {
-  .dso-modal {
-    inline-size: 100dvi;
-    block-size: 100dvb;
-  }
-  .dso-modal .dso-dialog {
-    display: flex;
-    flex-direction: column;
-    inline-size: 100%;
-    block-size: 100%;
-  }
-  .dso-modal .dso-dialog > dso-scrollable {
-    flex-grow: 1;
-    max-block-size: unset;
-  }
-  .dso-modal .dso-footer {
-    flex-shrink: 0;
-  }
-}
-
-dso-modal [slot=body] p {
-  margin-block: 0 var(--_dt-rich-content-margin-block, 16px);
-  margin-inline: 0;
-}
-dso-modal [slot=body] ul,
-dso-modal [slot=body] ol {
-  margin-block-end: 16px;
-}
-dso-modal [slot=body] ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),
-dso-modal [slot=body] ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {
-  padding-inline-start: 24px;
-}
-dso-modal [slot=body] ul ul,
-dso-modal [slot=body] ul ol,
-dso-modal [slot=body] ol ul,
-dso-modal [slot=body] ol ol {
-  margin-block-end: 0;
-}
-dso-modal [slot=body] pre {
-  margin-block: 0 16px;
-  margin-inline: 0;
-}
-dso-modal [slot=body] blockquote {
-  padding-block: 16px;
-  padding-inline: 24px;
-}
-dso-modal [slot=body] dso-highlight-box,
-dso-modal [slot=body] .dso-highlight-box {
-  margin-block-end: 24px;
-}
-dso-modal [slot=body] img {
-  block-size: auto;
-  max-inline-size: 100%;
-}
-@media screen and (max-width: 767px) {
-  dso-modal [slot=footer] .dso-primary + .dso-primary, dso-modal [slot=footer] .dso-primary + .dso-secondary, dso-modal [slot=footer] .dso-primary + .dso-tertiary, dso-modal [slot=footer] .dso-secondary + .dso-primary, dso-modal [slot=footer] .dso-secondary + .dso-secondary, dso-modal [slot=footer] .dso-secondary + .dso-tertiary, dso-modal [slot=footer] .dso-tertiary + .dso-primary, dso-modal [slot=footer] .dso-tertiary + .dso-secondary, dso-modal [slot=footer] .dso-tertiary + .dso-tertiary {
-    margin-inline-start: 0;
-  }
-  dso-modal [slot=footer] button {
-    inline-size: 100%;
-    text-align: center;
-  }
-  dso-modal [slot=footer] button + button {
-    margin-block-start: 8px;
-  }
-  dso-modal [slot=footer] button.dso-tertiary,
-  dso-modal [slot=footer] button.dso-tertiary span {
-    float: none;
-  }
-}
-dso-modal [slot=footer] .dso-tertiary {
-  float: inline-start;
-  line-height: calc(1.5em - 1px);
-  padding-block: 11px;
-  padding-inline: 0;
-  position: relative;
-}
-
 nav {
   display: block;
 }
@@ -8422,7 +8131,7 @@ dso-viewer-grid .dso-toggle-main-button {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -8440,7 +8149,7 @@ dso-viewer-grid .dso-toggle-main-button {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -8455,11 +8164,13 @@ dso-viewer-grid .dso-toggle-main-button {
   background-color: var(--_dso-button-tertiary-background-color, );
   border-color: var(--_dso-button-tertiary-border-color, );
   color: var(--_dso-button-tertiary-color, #39870c);
+  float: var(--_dt-button-float-tertiary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: auto;
+  inline-size: var(--_dt-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -8467,16 +8178,19 @@ dso-viewer-grid .dso-toggle-main-button:hover {
   background-color: var(--_dso-button-tertiary-hover-background-color, );
   border-color: var(--_dso-button-tertiary-hover-border-color, );
   color: var(--_dso-button-tertiary-hover-color, #275937);
+  float: var(--_dt-button-float-tertiary, none);
 }
 dso-viewer-grid .dso-toggle-main-button:active {
   background-color: var(--_dso-button-tertiary-active-background-color, );
   border-color: var(--_dso-button-tertiary-active-border-color, );
   color: var(--_dso-button-tertiary-active-color, #173521);
+  float: var(--_dt-button-float-tertiary, none);
 }
 dso-viewer-grid .dso-toggle-main-button[disabled], dso-viewer-grid .dso-toggle-main-button[disabled]:hover {
   background-color: var(--_dso-button-tertiary-disabled-background-color, );
   border-color: var(--_dso-button-tertiary-disabled-border-color, );
   color: var(--_dso-button-tertiary-disabled-color, #afcf9d);
+  float: var(--_dt-button-float-tertiary, none);
 }
 dso-viewer-grid .dso-toggle-main-button.dso-small {
   line-height: 1rem;
@@ -8524,7 +8238,8 @@ dso-viewer-grid .dso-toggle-main-button dso-icon + span:not(.sr-only) {
 dso-viewer-grid .dso-toggle-main-button {
   border: 0;
   line-height: 1;
-  padding: 0;
+  padding-inline: 0;
+  padding-block: var(--_dt-button-padding-block-tertiary, 0);
   background-color: transparent;
 }
 dso-viewer-grid .dso-toggle-main-button[disabled].dso-spinner-left, dso-viewer-grid .dso-toggle-main-button[disabled].dso-spinner-right {