@import url("../fonts.css");
@import url("./variables.css");
@import url("./typography.css");
@import url("./icons.css");
@import url("./elements.css");
@import url("./layout.css");
@import url("./docs.css");

/******************************************************************************
general settings (font / layout)
*******************************************************************************/

.general-settings label > span:first-child {
  display: block;
  margin-bottom: 0.35em;
}

label.ui_font-select {
  margin-bottom: 0.25em;
}

button.ui_font-select {
  margin-bottom: 1em;
}

/**************************************************************************** */

/**
 * Using .typeroof-ui as the class for containers within which the
 * elements will be treated as typeroof ui components. Especially
 * for the styling general html-elements (h1, h2, ...).
 */
.typeroof-ui :is(h1, h2, h3, h4, h5, h6) {
  margin-block: var(--gap-size) var(--gap-size);
}

.typeroof-ui :is(ol, ul) {
  margin-block: var(--gap-size) var(--gap-size);
}

/* No margin for nested lists. */
.typeroof-ui :is(ol, ul) :is(ul, ol) {
  margin-block: 0;
}

.typeroof-ui {
  font-size: 0.8rem;
  font-variation-settings: "opsz" 9;
}

.ui_select_task_automation .ui_plain_select-label {
  display: block;
  margin: 0.5em 0 0.35em;
}

.ui_select_task_automation .ui_plain_select-label,
.ui_axes_math > label {
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Should probably not use <strong> there! */
.typeroof-ui-label,
.typeroof-ui label > :is(strong, span):first-child {
  font-weight: 600;
}

.key_moments_timeline-items {
  list-style: none;
  padding: 0;
}

.active > .key_moments_timeline-button {
  font-weight: 700;
}

.ui_time_control_circle {
  touch-action: none;
  width: 200px;
  height: 200px;
}

.ui_time_control_circle-track {
  fill: oklch(95% 0.05 calc(1turn * var(--t)));
  stroke: black;
  stroke-width: 2;
}

.ui_time_control_circle-track_back {
  fill: var(--gap-color);
}

.ui_time_control_circle-hand {
  stroke: black;
  stroke-width: 2;
  fill: oklch(90% 0.2 calc(1turn * var(--t)));
}

.ui_time_control_circle-key_moments > * {
  fill: black;
}

.ui_time_control_circle-key_moments > .active {
  fill: red;
}

.ui_time_control_circle-key_moments :hover {
  stroke: black;
  stroke-width: 7;
  stroke-opacity: 0.3;

  /* paint the stroke under the fill */
  paint-order: stroke;
}

.stage_and_actors {
  /* It's important, that the inner size of the stage has
     * the exact width/height dimensions.
     */
  box-sizing: content-box;
  border: var(--gap-size) solid var(--gap-color, black);
  border-inline-start-width: 0;
}

.stage_and_actors-wrapper {
  position: relative;
  overflow: hidden;
}

.stage_and_actors-wrapper::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: var(--transparency-indicator-bg-size);
  background-image: var(--transparency-indicator-bg-image);
}

.stage_and_actors-wrapper > .stage_and_actors-layer-top {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}

.stage_and_actors-layer-sub {
  position: absolute;
  overflow: visible;
}

.actor_renderer-line_of_text {
  display: block;
  white-space: pre;
  height: fit-content; /* inherit; */
  width: fit-content; /* inherit; */
}

.stage-manager_actors li.active > button span {
  font-weight: 700;
}

.ui_toggle_key_moment_button.active {
  font-weight: 700;
}

.key_moments_controls .key_moments_controls-insert_moment::before {
  content: "⎀ ";
  line-height: 1em;
}

ol.ui_zone-key_moments_main {
  padding: 0;
  list-style: inside square;
}

.ui_key_moment_controller > label {
  display: block;
}

.ui_zone-key_moments_main .ui_key_moment_controller:nth-child(odd) {
  background: var(--list-item-odd-bg);
}

.ui_zone-key_moments_main .ui_key_moment_controller:nth-child(even) {
  background: var(--list-item-even-bg);
}

li.ui_key_moment_controller.active:not(:last-child) {
  border-bottom: var(--gap-size) solid var(--gap-color);
  margin-bottom: 1em;
  padding-bottom: 1em;
}

.stage-manager_actors ol {
  list-style: none;
  padding-inline-start: 0;
}

.stage-manager_actors > ol {
  padding-inline-start: 0;
}

.ui_font-select {
  display: block;
}

.ui_font-select_select {
  max-width: 15em;
}

.ui_actor_time_control_circle {
  width: 75px;
  height: 75px;
}

.ui_actor_time_control_circle
  :is(.ui_time_control_circle-track, .ui_time_control_circle-hand) {
  stroke-width: 5;
}

:root {
  --indicator-padding: 0.2em;
  --drop-indicator-color: #333;
  --indentation-width: 0.7em;
}

.stage-manager_actors > ol:empty::before {
  content: "(empty: drop actor here)";
}

.tree_editor > ol:empty::before {
  content: "(empty: drop item here)";
}

.ui_axes_math-locations_sum-items:empty::before,
.ui_base_list-items:empty::before,
.ui_base_map-items:empty::before {
  content: "(empty: add item here)";
}

.ui-axes_math-location_values:empty::before,
.ui-style_patch-composite:empty::before {
  content: " (empty: add item here) ";
  background: var(--list-item-odd-bg);
}

.ui-style_patch-composite:empty::before,
.stage-manager_actors > ol:empty::before,
.ui_axes_math-locations_sum-items:empty::before,
.ui_base_list-items:empty::before,
.ui_base_map-items:empty::before,
.ui_axes_math-map_product-items:empty::before {
  display: block;
  background-color: var(--list-item-odd-bg);
}

.ui-style_patch-composite > *:nth-child(odd),
.stage-manager_actors li.odd-row {
  --background-base-color: var(--list-item-odd-bg);

  background: var(--list-item-odd-bg);
}

.stage-manager_actors > ol,
.ui-style_patch-composite > *:nth-child(even),
.stage-manager_actors li.even-row {
  --background-base-color: var(--list-item-even-bg);

  background: var(--list-item-even-bg);
}

/* FIXME: make alternating perhaps? */
.ui_base_map,
.ui_base_map > *,
.ui_axes_math-locations_sum,
.ui_axes_math-locations_sum > *,
.ui_base_list-items,
.ui_base_list-items > *,
.ui_base_map-item,
.ui_base_map-item > * {
  --background-base-color: var(--list-item-odd-bg);

  background: var(--list-item-odd-bg);
}

.ui_videoproof_array_layers-items > *:nth-child(odd) {
  --background-base-color: var(--list-item-odd-bg);

  background: var(--list-item-odd-bg);
}

.ui_videoproof_array_layers-items,
.ui_videoproof_array_layers-items > *:nth-child(even) {
  --background-base-color: var(--list-item-even-bg);

  background: var(--list-item-even-bg);
}

.stage-manager_actors li:last-child > ol {
  /* Only for layer (container) items
     * This way there's a drop zone to insert the drop after the li.
     */
  padding-bottom: 0.1em;
}

.stage-manager_actors li {
  padding: calc(var(--indicator-padding) * 0.5) 0;
}

.stage-manager_actors li > :first-child {
  margin-inline-start: calc(
    var(--indentation-width, 1em) * var(--structural-depth, 0)
  );
}

:is(
  .ui_videoproof_array_layers-items,
  .ui_videoproof_array_layers-items > *,
  .ui_base_map,
  .ui_base_map > *,
  .ui_base_map-item,
  .ui_base_map-item > .ui_base_map-key,
  .ui_axes_math-locations_sum,
  .ui_axes_math-locations_sum > *,
  .ui_base_list-items,
  .ui_base_list-items > *,
  .ui-style_patch-composite,
  .ui-style_patch-composite > *
):is(.drop_target_indicator-before, .drop_target_indicator-after),
.stage-manager_actors li.drop_target_indicator-before,
.stage-manager_actors li.drop_target_indicator-after {
  background-position: calc(
      var(--indentation-width, 1em) * var(--structural-depth, 0)
    )
    0;
  background-size: 10em auto;
  background-repeat: no-repeat;
}

:is(
  .ui_videoproof_array_layers-items,
  .ui_videoproof_array_layers-items > *,
  .ui_base_map,
  .ui_base_map > *,
  .ui_base_map-item,
  .ui_base_map-item > .ui_base_map-key,
  .ui_axes_math-locations_sum,
  .ui_axes_math-locations_sum > *,
  .ui_base_list-items,
  .ui_base_list-items > *,
  .ui-style_patch-composite,
  .ui-style_patch-composite > *
):is(.drop_target_indicator-before),
.stage-manager_actors li.drop_target_indicator-before {
  --local-indicator-padding: calc(
    var(--indicator-padding) + var(--own-padding-top, 00em)
  );

  padding: var(--local-indicator-padding) 0 var(--own-padding-bottom, 0) 0;
  background-image: linear-gradient(
    to bottom,
    var(--drop-indicator-color) var(--indicator-padding),
    var(--background-base-color) var(--indicator-padding)
  );
}

:is(
  .ui_videoproof_array_layers-items,
  .ui_videoproof_array_layers-items > *,
  .ui_base_map,
  .ui_base_map > *,
  .ui_base_map-item,
  .ui_base_map-item > .ui_base_map-key,
  .ui_axes_math-locations_sum,
  .ui_axes_math-locations_sum > *,
  .ui_base_list-items,
  .ui_base_list-items > *,
  .ui-style_patch-composite,
  .ui-style_patch-composite > *
):is(.drop_target_indicator-after),
.stage-manager_actors li.drop_target_indicator-after {
  --local-indicator-padding: calc(
    var(--indicator-padding) + var(--own-padding-bottom, 0em)
  );

  padding: var(--own-padding-top, 0) 0 var(--local-indicator-padding) 0;
  background-image: linear-gradient(
    to top,
    var(--drop-indicator-color) var(--indicator-padding),
    var(--background-base-color) var(--indicator-padding)
  );
}

.stage-manager_actors .drop_target_indicator-after:last-child {
  padding: calc(var(--indicator-padding) * 0.5) 0 var(--indicator-padding) 0;
}

.stage-manager_actors ol:empty::after,
.stage-manager_actors .drop_target_indicator-insert::after {
  display: block;
  content: "";
  margin-left: calc(
    var(--indentation-width, 1em) * (1 + var(--structural-depth, 0))
  );
  padding: var(--indicator-padding) 0;
}

.stage-manager_actors ol:not(.drop_target_indicator-insert):empty::after {
  background: var(--background-base-color);
}

.stage-manager_actors .drop_target_indicator-insert::after {
  background-image: linear-gradient(
    to top,
    var(--drop-indicator-color) var(--indicator-padding),
    var(--background-base-color) var(--indicator-padding)
  );
  background-size: 10em auto;
  background-repeat: no-repeat;
}

:is(
    .ui_axes_math-locations_sum-items,
    .ui_base_list-items,
    .ui_base_map-items,
    .ui_axes_math-map_product-items,
    .ui-axes_math-location_values,
    .ui-style_patch-composite
  ):empty::before {
  padding: var(--indicator-padding);
}

:is(
    .ui_axes_math-locations_sum-items,
    .ui_base_list-items,
    .ui_base_map-items,
    .ui_axes_math-map_product-items,
    .ui-axes_math-location_values,
    .ui-style_patch-composite
  ).drop_target_indicator-insert::before {
  border: var(--indicator-padding) solid var(--drop-indicator-color);
  padding: 0;
}

.stage-manager_actors li > * {
  vertical-align: middle;
  /* stylelint-disable-next-line declaration-property-value-no-unknown */
  vertical-align: -webkit-baseline-middle;
}

/******************************************************************************
drag handle
*******************************************************************************/

.drag_handle {
  display: inline-block;
  font-size: 1.1em;
  padding: 0.1em 0.25em;
  background-color: var(--button-bg-color);
  box-shadow: rgb(43 43 43 / 8%) 0 0 0.1875rem;
  border: 1px solid var(--button-border-color);
  border-radius: 0.25rem;
  color: var(--text-color);
  cursor: grab;
  margin-right: 0.125rem;
}

.drag_handle:hover {
  box-shadow: rgb(43 43 43 / 15%) 0 0 0.625rem;
  outline: 0.1em solid black;
  z-index: 1;
  position: relative;
}

.drag_handle:active:hover {
  cursor: grabbing;
}

.waste_basket_drop_target {
  display: block;
}

/**************************************************************************** */

.ui_base_drop_target-main_drop_zone {
  display: inline-block;
}

.ui_base_drop_target-main_drop_zone::after {
  content: "";
  font-size: 1.2em;
  padding: 0.2em;
  display: inline-block;
}

.waste_basket_drop_target-main_drop_zone::after {
  content: "🗑️";
}

.ui_document_segment_typespec-main_drop_zone::after {
  content: "⌖";
  outline: 0.1em dashed grey;
  padding: 0.15em;
}

.ui_document_element_typespec-receptive,
.waste_basket_drop_target-receptive .waste_basket_drop_target-main_drop_zone {
  background: lightyellow;
  outline: 3pt solid grey;
}

.ui_color_patch {
  position: relative;

  --width: 1.5em;
  --height: 1.3em;

  width: var(--width);
  height: var(--height);
  overflow: visible;
}

.ui_color_patch-has_color::after,
.ui_color_patch-has_color::before {
  display: block;
  content: "";
  width: var(--width);
  height: var(--height);
  position: absolute;
  left: 0;
  top: 0;
}

.ui_color_patch-has_color:hover::after {
  --hover-size: 7rem;

  min-width: var(--hover-size);
  height: var(--hover-size);
  left: calc((-1 * var(--hover-size) / 2) + (var(--width) / 2));
  top: calc((-1 * var(--hover-size) / 2) + (var(--height) / 2));
  border-radius: calc(var(--hover-size) / 2);

  /* NOTE for transparent colors this is important, otherwise, we can't
     * see why/where surrounding UIs are blocked. */
  border: var(--gap-size) solid var(--gap-color);

  /* This way the enlarged color patch won't keep the hover state, i.e.
     * making the bigger hover color patch disappear when the area
     * of the .ui_color_patch-has_color is left by the pointer.
     */
  pointer-events: none;
  z-index: 2;
}

.ui_color_patch-has_color::after {
  z-index: 1;
  background-color: var(--color);
}

.ui_color_patch-has_color::before {
  z-index: 0;
  background-size: var(--transparency-indicator-bg-size);
  background-image: var(--transparency-indicator-bg-image);
}

.ui_color_patch-no_color_label {
  display: none;
}

.ui_color_patch-no_color .ui_color_patch-no_color_label {
  display: initial;
  padding-left: 2em;
}

.ui-show_processed_properties-list {
  padding: 0;
  list-style: inside none;
}

.ui-show_processed_properties-item:nth-child(even) {
  background: var(--list-item-even-bg);
}

.ui-show_processed_properties-item:nth-child(odd) {
  background: var(--list-item-odd-bg);
}

.ui-show_processed_properties-value {
  font-weight: bold;
}

.ui-show_processed_properties-value-color_patch {
  display: inline-block;
}

.ui-show_processed_properties-item-type_color,
.ui-show_processed_properties-item-type_text {
  overflow: hidden;
  white-space: nowrap;
}

.ui-show_processed_properties-item-type_color:hover,
.ui-show_processed_properties-item-type_text:hover {
  white-space: initial;
}

.ui-show_processed_properties-item-type_color:hover {
  overflow: initial;
}

.ui-show_processed_properties-item-type_color:hover
  .ui-show_processed_properties-value-text,
.ui-show_processed_properties-item-type_text:hover
  .ui-show_processed_properties-value-text {
  display: block;
}

.ui-show_processed_properties-value-text {
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}

.ui-show_processed_properties-item-type_color:hover
  .ui-show_processed_properties-value-text,
.ui-show_processed_properties-value-text:hover {
  text-overflow: ellipsis;
  overflow: initial;
  white-space: initial;
  display: initial;
}

.ui_color_chooser-label_toggle {
  display: list-item;
  list-style-type: disclosure-closed;
  list-style-position: inside;
}

.ui_color_chooser.settings_visible .ui_color_chooser-label_toggle {
  list-style-type: disclosure-open;
}

.ui_color_chooser .ui_color_patch {
  display: inline-block;
  margin-left: 0.5em;
  vertical-align: baseline;
  margin-top: 0.3em;
}

.ui_color_component {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto;
  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
  grid-template-areas:
    "value-box toggle"
    "color-bar color-bar";
}

.ui_color_component > .ui_toggle_button {
  grid-area: toggle;
  justify-self: end;
}

.ui_color_component > .number-and-range-input_value-box {
  grid-area: value-box;
}

.ui_color_component > .number-and-range-input_color-bar {
  grid-area: color-bar;
}

.number-and-range-input_color-bar::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: var(--transparency-indicator-bg-size);
  background-image: var(--transparency-indicator-bg-image);
}

.number-and-range-input_color-bar {
  position: relative;
  display: flex;
  justify-content: center;
  height: 3rem;
}

.number-and-range-input_color-bar input {
  width: 100%;
  width: -moz-available; /* WebKit-based browsers will ignore this. */
  width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
  width: stretch;
  position: relative;
  z-index: 1;
}

.number-and-range-input_color-bar canvas {
  width: var(--width, 0);
  height: var(--height, 0);

  /*
     * important, canvas in this element must not change the container height
     * width and height will be set in javascript to cover all of the container.
     */
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
}

.number_and_range_input input[type="number"] {
  max-width: 10ex;
}

.measure_box {
  position: absolute;
  top: -100px; /* hide off-screen */

  /* rather use 1px, so there is no shortcut optimization that
     * prevents measuring the content.
     */
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.measure_box-sample {
  white-space: nowrap;
}

/** =>> START from Videoproof Array **/
.fixed-line-breaks {
  word-break: break-all;
  overflow-wrap: break-word;
  font-size: 36pt;
  line-height: 1.5;
  text-align: left;
}

/* where is this rule used? */
.end-of-line::after {
  display: block;
  content: "";
}

.fixed-line-breaks div,
.fixed-line-breaks span {
  display: block;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

.fixed-line-breaks span {
  display: inline-block;
  min-width: 0.1em;

  /* 	font: inherit; */
  text-align: left;
  margin-right: 0.3em;
}

/* used in contextual/kerning mode */
.fixed-lines span {
  display: inline;
  margin-right: 0;
  white-space: nowrap;
}

.actor_renderer-videoproof_array {
  /**
     * This way it scrolls vertically within the stage.
     * FIXME:CAUTION: May be too simplistic and require rethinking but
     * looks good so far. In a stand-alone layout, as opposed to in the
     * stage-and-actors layout, we might need a different handling.
     * I.e. in the case of usage within an movie/film-like
     * non-interactive animation, it is wrong to add manual scrolling to
     * this! However, so far there's no distinction made between
     * interactive and non-interactive usage. Overflow setup could be
     * another property.
     */
  height: 100%;
  overflow-y: auto;
}

/** <<= END from Videoproof Array **/

.ui_checkbox-extended.not-available {
  color: var(--text-color-disabled);
}

.ui_key_moments_link_navigation-list,
.ui_more_raps-list {
  list-style: none;
  padding: 0;
  font-size: 0.8em;
  font-variation-settings: "opsz" 7;
}

:is(.ui_key_moments_link_navigation-list, .ui_more_raps-list) li {
  margin: 0.25em 0;
}

.ui_more_raps-list_item.active {
  --animation-local-impact: 1;
}

.ui_key_moments_link_navigation-list_item,
.ui_more_raps-list_item.active {
  /*
    color: oklch(calc(var(--animation-local-impact, 0) * 67.35%) 0.217 12.23);
    */
  color: hsl(0deg 100% calc(50% * var(--animation-local-impact, 0)));
}

.ui_key_moments_link_navigation-list_item-input,
.ui_more_raps-list_item-input {
  text-decoration: none;
}

.ui_videoproof_array_layers-items {
  padding: 0;
}

.ui_videoproof_array_layers-items > * {
  display: list-item;
  list-style: none;
}

.ui_videoproof_array_layers-item {
  padding: var(--gap-size) 0;
}

.ui_videoproof_array_layers-item .ui_button {
  float: right;
}

.dragging {
  outline: 0.05em solid grey;
}

.actor_renderer-videoproof_array_v2 {
  /* configuration in CSS is not yet a common praxis in this project
     * line-height: 1.5;
     */
  --line-height-em: 1.5;
  --gap-widht-em: 0.1;

  display: block flex;

  /* row-gap: .4em; */

  /* Better than having display: inline children as together with
     * "flex-wrap: wrap" the children have line breaks, but with column-gap
     * we can control the gap between children without having to remove
     * e.g. the margin-right on a last element of the line.
     */
  flex-wrap: wrap;
  gap: 0 calc(1pt * var(--font-size-pt, 24) * var(--gap-widht-em, 0));
}

.typeroof-layout > .actor_renderer-videoproof_array_v2 {
  /* To make sure the outline of the cell boxes is visible at the top */
  margin-top: var(--gap-size);
}

.actor_renderer-videoproof_array_v2-zone {
  font-size: calc(1pt * var(--font-size-pt, 24));
  height: calc(1em * var(--line-height-em, 1));

  /* inline is not required anymore, as the parent lays these out as
     * flex with flex-wrap: wrap.
     */
  display: /*inline*/ flex;
  justify-content: var(
    --cell-alignment,
    center
  ); /* this is the actual text align */

  position: relative;
  width: calc(1em * (var(--widest-cell-em, 3)));

  /* outline: 1px solid; */
}

.actor_renderer-videoproof_array_v2-cell {
  position: absolute;
  line-height: initial;

  /* This is a nice feature to turn on optionally, as it accurateley
     * draws the glyph box and that in the text color, so it is easy
     * to understand.
     */

  /* outline: 1px solid; */

  /*
     * FIXME: good feature additionally would be drawing the baseline
     * optionally.
     */

  /* The box height seems rounded to */

  /**
     * align to bottom of box
     * --descender-em: move down to align baseline with bottom of the box
     * --max-descender-em: move up to align with bottom of the biggest cell descender

     This is good because it leaves some space at the to of the page
     to no clip extensively high diacritics. However, at the bottom, it
     may clip extensively low diacritics.
     */
  bottom: calc(1em * (var(--max-descender-em) - var(--descender-em)));

  /**
     * align to top of box
     * --ascender-em: move up to align baseline with top of the box
     * --max-ascender-em: move down to align with top of the biggest cell descender

    top: calc(1em *(var(--max-ascender-em) - var(--ascender-em)))
     */
}

.actor_renderer-videoproof_array_v2-cell:first-child {
  margin-left: 0;
}

.ui_alignment label {
  display: block;
}

.ui_alignment-radio_icon {
  display: none;
}

.ui_alignment input + .ui_alignment-radio_icon {
  display: block;
  font-size: inherit;
  width: 3em;
  height: 3em;
  background: no-repeat;
  background-size: cover;
  background-position: center center;
  margin: 0 auto;
  background-color: white;
  position: absolute;
  z-index: 1;
}

.ui_alignment label.ui_alignment-radio_label {
  display: inline-block;
  vertical-align: text-top;
  position: relative;
  width: 3em;
  height: 3em;
  overflow: hidden;
}

.ui_alignment input {
  position: absolute;
  z-index: 0;
}

.ui_alignment input.ui_alignment-left + .ui_alignment-radio_icon {
  background-image: var(--alignment-left-icon);
}

.ui_alignment input.ui_alignment-left:checked + .ui_alignment-radio_icon {
  background-image: var(--alignment-left-active-icon);
}

.ui_alignment input.ui_alignment-center + .ui_alignment-radio_icon {
  background-image: var(--alignment-center-icon);
}

.ui_alignment input.ui_alignment-center:checked + .ui_alignment-radio_icon {
  background-image: var(--alignment-center-active-icon);
}

.ui_alignment input.ui_alignment-right + .ui_alignment-radio_icon {
  background-image: var(--alignment-right-icon);
}

.ui_alignment input.ui_alignment-right:checked + .ui_alignment-radio_icon {
  background-image: var(--alignment-right-active-icon);
}

.ui_alignment input.ui_alignment-justify + .ui_alignment-radio_icon {
  background-image: var(--alignment-justify-icon);
}

.ui_alignment input.ui_alignment-justify:checked + .ui_alignment-radio_icon {
  background-image: var(--alignment-justify-active-icon);
}

.ui_axes_math-locations_sum-items {
  margin-left: var(
    --indentation-width,
    1em
  ); /* space for the list-style-type */

  --own-padding-top: 0.25em;
  --own-padding-bottom: 0em;
}

.ui_axes_math-locations_sum-items > * {
  display: list-item;
  list-style: none;
  padding-top: var(--own-padding-top, 0);
  padding-bottom: var(--own-padding-bottom, 0);
}

.ui_axes_math-map-label,
.ui_axes_math-locations_sum-label,
.ui-axes_math-locations_sum_item-label {
  padding: 0 0.2em;
  border: 0.1em solid black;
}

.ui-axes_math-locations_sum_item > :last-child {
  /* have the label on the same line as the drag-handle
     * the drag-handle is first-child if present
     * The child widget (currently!!) is inserted last.
     * this affects the this.element/localZoneElement
     *
     * I would have moved the label outside, but the focus-within
     * mechanism below, that reveals some tools, is nice like that and
     * the label is a natural element to click on and hence capture
     * focus.
     */
  display: inline;
}

/*
 * hide
 *    - output: when focused
 *    - inputs: when not focused (by default)
 */
.ui-axes_math-location_value:focus-within .ui-axes_math-location_value-output,
.ui-axes_math-location_value-drag_handle,
.ui-axes_math-location_value .ui-axes_math-location_value-logical_value,
.ui-axes_math-location_value .ui-axes_math-location_value-numeric_value,
.ui-axes_math-location_value.dragging
  .ui-axes_math-location_value-logical_value,
.ui-axes_math-location_value.dragging
  .ui-axes_math-location_value-numeric_value,
.ui-axes_math-location_value:focus-within.dragging
  .ui-axes_math-location_value-logical_value,
.ui-axes_math-location_value:focus-within.dragging
  .ui-axes_math-location_value-numeric_value {
  display: none;
}

/*
 * show
 *    - output: when not focused (default)
 *    - inputs: when focused
 */
.ui-axes_math-location_value:focus-within
  .ui-axes_math-location_value-logical_value,
.ui-axes_math-location_value:focus-within
  .ui-axes_math-location_value-numeric_value,
.ui-axes_math-location_value:focus-within
  .ui-axes_math-location_value-drag_handle,
.ui-axes_math-location_value.dragging .ui-axes_math-location_value-output,
.ui-axes_math-location_value.dragging .ui-axes_math-location_value-drag_handle {
  display: initial;
}

.ui-axes_math-location_value-numeric_value {
  width: calc(5 * 0.75em);
}

/* this coulde be handled as above with focus-within and <output>,
 * the styling would be easier, especially the typography
 */
.ui_base_map-item .ui_base_map-key-input {
  border: none;
  text-align: left;
  background: #eee;

  /* body text setup, it's hard to inherit for <input> */
  font-family: RobotoFlex, sans-serif;
  font-variation-settings: "opsz" 12;
  font-size: inherit;
  font-weight: 600;
  width: 3em;
}

:is(ol, ul).ui_base_map-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ui_base_map-item,
.ui_axes_math-map-item,
.ui-dimension_sequence {
  --padding-horizontal: 0.25em;
  --drop-target-indicator-width: 0.2em;
}

:is(.ui_axes_math-map-item, .ui_base_map-item)
  > :is(.ui_axes_math-axis_tag, .ui_base_map-key, .drag_handle) {
  display: inline-block;
  padding-right: var(--padding-horizontal);
}

.ui_style_patches_map-item {
  display: flex;
}

.ui_style_patches_map .ui_base_map-key {
  flex-grow: 1;
}

.ui_style_patches_map-item .ui_base_map-key-input {
  width: 100%;
}

.ui_style_patches_map-item-value {
  min-width: 5.3em;
}

.ui_style_patches_map-item-value.active {
  font-weight: 700;
}

.ui_style_patches_map-item-drag_handle {
  order: -10;
}

.ui_axes_math-map-item .ui-axes_math-location_values {
  display: inline;
}

.ui_axes_math-axis_tag:has(+ .drag_handle) {
  padding-right: 0;
}

.ui_axes_math-map-item > .ui-axes_math-location_value,
.ui-axes_math-location_values > .ui-axes_math-location_value {
  display: inline-block;
  padding: 0 var(--padding-horizontal);
}

.ui-axes_math-location_value.drop_target_indicator-after {
  border-right: var(--drop-target-indicator-width) solid
    var(--drop-indicator-color);
  padding-right: calc(
    var(--padding-horizontal) - var(--drop-target-indicator-width) / 2
  );
}

.ui-axes_math-location_value.drop_target_indicator-after
  + .ui-axes_math-location_value {
  padding-left: calc(
    var(--padding-horizontal) - var(--drop-target-indicator-width) / 2
  );
}

.ui-axes_math-location_value.drop_target_indicator-before {
  border-left: var(--drop-target-indicator-width) solid
    var(--drop-indicator-color);
  padding-left: calc(
    var(--padding-horizontal) - var(--drop-target-indicator-width) / 2
  );
}

:is(.ui_axes_math-axis_tag, .drag_handle, .ui-axes_math-location_value):has(
  + .drop_target_indicator-before
) {
  padding-right: calc(
    var(--padding-horizontal) - var(--drop-target-indicator-width) / 2
  );
}

.ui_base_map-tools {
  display: inline-block;
  margin-left: 0.5em;
  vertical-align: middle;
  /* stylelint-disable-next-line declaration-property-value-no-unknown */
  vertical-align: -webkit-baseline-middle;
}

.ui_base_map-tools > * {
  display: none;
}

:focus-within > .ui_base_map-tools:not(.ui_style_patches_links_map-tools) > *,
.ui_style_patches_map-tools > *,
.ui_style_patches_links_map-tools > * {
  display: initial;
}

.ui_style_patches_links_map-tools {
  margin-left: 0;
  margin-bottom: 0.5em;
  display: block;
}

.ui_style_patches_links_map-tools
  > *:not(.ui_style_patches_links_map-create_select) {
  display: none;
}

.ui_style_patches_links_map-tools:focus-within > * {
  display: block;
}

.ui_style_patches_links_map-item {
  display: flex;
  flex-wrap: wrap;
}

.ui_style_patches_links_map-item > .ui_base_map-key {
  flex-grow: 1;

  & .ui_base_map-key-input {
    width: 100%;
  }
}

.ui_style_patches_links_map-item-drag_handle {
  order: -1;
}

.ui_style_patches_links_map-item_value {
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.ui_style_patches_links_map-item_value-value_label {
  flex: 1 1 100%;
}

.ui_style_patches_links_map-item_value-change_input {
  flex: 1;
}

.ui_style_patches_links_map-item_value-change_input
  > .ui_style_patches_links_map-item_value-change_input-input {
  width: 100%;
}

.ui_style_patches_links_map-item_value-change_select,
.ui_style_patches_links_map-item_value-change_input {
  display: none;
}

.ui_style_patches_links_map-item_value:focus-within
  :is(
    .ui_style_patches_links_map-item_value-change_select,
    .ui_style_patches_links_map-item_value-change_input
  ) {
  display: block;
}

.ui_style_patches_map-tools {
  margin-left: 0;
}

.ui_style_patches_map-tools .ui_base_map-key-input {
  width: 4em;
}

.ui_axes_math
  > .ui_axes_math-locations_sum
  > .ui_axes_math-locations_sum-items {
  margin-left: 0;
}

.ui_axes_math
  .ui_key_moments_link_navigation
  .ui_key_moments_link_navigation-label {
  font-weight: 600;
}

.ui_axes_math .ui_key_moments_link_navigation {
  margin-block: var(--gap-size) var(--gap-size);

  /* it's nested into another fieldset */
  border: none;
  padding: 0;
}

.ui_axes_math .ui_key_moments_link_navigation-list {
  margin-block-start: 0;
}

.ui_time_control.ui_collapsible_mixin-open .ui_time_control_circle {
  display: block;
  margin: 0 auto;
}

.ui_time_control .ui_time_control-duration input {
  width: 6em;
}

/******************************************************************************
collapsible mixin
*******************************************************************************/

.ui_collapsible_mixin-closed {
  padding-block: 0;
}

.ui_collapsible_mixin-closed > :not(legend) {
  display: none;
}

.ui_collapsible_mixin > legend {
  display: flex;
  justify-content: space-between;
}

.ui_collapsible_mixin > legend::after {
  display: inline-block;
  content: var(--chevron-down);
}

.ui_collapsible_mixin-open > legend::after {
  content: var(--chevron-up);
}

/**************************************************************************** */

.ui-dialog_openers-items {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ui-dialog_openers-item-button {
  width: 100%;
}

.ui-dialog-manage_state-serialize_output {
  font-family: monospace;
  white-space: pre;
  width: 80vw;
  min-height: 10em;
  display: block;
  overflow: auto;
}

.ui-dialog-manage_state-message-status_reset {
  display: none;
}

:is(
    .ui-dialog-manage_state-message-status_success,
    .ui-dialog-manage_state-message-status_fail
  )
  .ui-dialog-manage_state-message-process_label::after {
  text-transform: uppercase;
  color: white;
  margin-left: 0.3em;

  /* top/bottom padding seems to work nicely in the <legend> context */
  padding: 0.3em;
  font-weight: bolder;
}

.ui-dialog-manage_state-message-status_success
  .ui-dialog-manage_state-message-process_label::after {
  content: "succeeded";
  background: darkgreen;
}

.ui-dialog-manage_state-message-status_fail
  .ui-dialog-manage_state-message-process_label::after {
  content: "failed";
  background: darkred;
}

.ui_missing-ui_element {
  --border-spec: 1px dashed red;

  border-bottom: var(--border-spec);
  margin-bottom: var(--gap-size) 0;
}

.ui_missing-ui_element h4 {
  background: darkred;
  color: white;
}

.ui_missing-ui_element-full_key {
  font-weight: bold;
}

.ui_missing-ui_element-message {
  display: block;
  background: khaki;
}

.ui_leading-algorithm_container > :not(:first-child) {
  background: #dfdfdf;
  padding: 0.2em;
}

.typeroof-document {
  margin-left: 2em;
}

.typeroof-document-element {
  line-height: var(--line-height);
}

/* FIXME: this is temporary, margins need to be
 * a property. However, using the line-height of
 * the element AFTER as the gap-size is a good
 * enough for now runion/automation approach.
 */
.typeroof-document-element:not(:first-child) {
  margin-top: var(--line-height);
}

.ui_type_tools_grid-row {
  display: table-row;
}

/*
.ui_type_tools_grid-row:nth-child(even) {
    background: #eee;
}
*/

.ui_type_tools_grid-cell {
  display: table-cell;
  white-space: pre;

  /* Not sure if this produces typographically correct lines
     * is the line height still correct? It seems like the trimmed value
     * is lost from the line height...
     * Not sure if it's just lost for the initial line, and in-between lines
     * it's correct. I had a box, one line, font size: 52px; (39pt) bit the
     * box height measured (debugger, Computed, box model diagram) was 48px; line-height was
     * set to 1;
     * With two lines and a line break height was 100; (48 + 52 == 100) and
     * three lines: 152; so, it seems the trimmed value is lost only once,
     * for the box and the inter-line height is preserved. this has however
     * implications for boxes/block elements that create lines, as these
     * line-heights, when stacked, are shorter!
     *
     * It would probably be correct to add the trimmed value at the top of
     * the box. i.e. padding-top: 4px for the example above.
     */
  text-box-trim: trim-both;
  text-box-edge: text alphabetic;
  line-height: 1;

  /* the below doesn't work for more than one line, as the height is
     * then bigger than 1em and thus the trimmed amount misses again.
     * it would be good to add the trimmed amount as padding-top...
     * but there's likely no css-way to calculate that.
     *
     * As this is a table cell height is essentialy min-height, as the
     * cell will grow with other cells. min-height doesn't have an effect
     * with table-cell, so in another context, min-height would be better
     * here. This is to make the line height consistent also for first
     * lines. See above in the comment about tex-box-*.
       vertical-align: bottom;
       height: 1em;
     */
}

.ui-dimension_sequence .typeroof-ui-label {
  margin-inline-end: 0.5em;
}

/* "fontAxisTagValue" FIXME: not a good selector, not a good label */
.ui-dimension_sequence .ui_generic_struct_container .line_of_text label {
  margin-top: 0.3em;
  font-weight: 600;
  display: block;
}

/* "fontAxisTagValue" FIXME: not a good selector, not a good label */
.ui-dimension_sequence .ui_generic_struct_container .line_of_text label,
.ui-dimension_sequence .ui_generic_struct_container .number_input label {
  margin-top: 0.3em;
  font-weight: 600;
  display: block;
}

.dialog-multi_select_fonts {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}