/* dist/components/Fab/Fab.css */
.qm--fab {
  border-radius: var(--layout-border-radius-full);
  box-shadow: 0 2px 4px -2px var(--color-effects-shadow-md), 0 4px 6px -1px var(--color-effects-shadow-md);
  &.qm--fab-priority-primary {
    background: var(--color-background-action-default);
    &:hover:not(.no-hover) {
      background: var(--color-background-action-hover);
    }
    &.no-hover {
      &:hover {
        background: var(--color-background-action-default);
      }
    }
    svg {
      fill: var(--color-icon-inverted);
    }
  }
  &.qm--fab-priority-secondary {
    border: var(--layout-border-weight-xs) solid var(--color-border-action-subtle-default);
    background: var(--color-background-elevated);
    &:hover:not(.no-hover) {
      background: var(--color-background-action-subtle-hover);
    }
    &.no-hover {
      &:hover {
        background: var(--color-background-elevated);
      }
    }
    svg {
      fill: var(--color-icon-default);
    }
  }
}

/* dist/components/Popover/Popover.css */
.MuiPopover-paper.qm--popover {
  border-radius: var(--layout-border-radius-md);
  border: 1px solid var(--color-border-default);
  background: var(--color-background-elevated);
  padding: var(--layout-padding-xl);
  box-shadow: 0 2px 4px -2px var(--color-effects-shadow-md), 0 4px 6px -1px var(--color-effects-shadow-md);
  &.no-padding {
    padding: 0;
  }
}

/* src/icons/icon.css */
.phosphor-icon {
  color: var(--color-icon-default);
}
.phosphor-icon-spinning {
  animation: phosphor-icon-spin 1s linear infinite;
}
@keyframes phosphor-icon-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .phosphor-icon-spinning {
    animation: none;
  }
}

/* dist/components/Chip/Chip.css */
.MuiChip-root.qm--chip {
  display: inline-flex;
  height: var(--layout-dimension-form-content-outer-default);
  padding: var(--layout-padding-form-default);
  align-items: center;
  gap: var(--layout-gap-form-sm);
  flex-shrink: 0;
  border-radius: var(--layout-border-radius-form-default);
  border: var(--layout-border-weight-xs) solid var(--color-border-neutral-default);
  background: var(--color-background-elevated);
  color: var(--color-text-default);
  font-family: var(--layout-font-family-default);
  font-size: var(--layout-font-size-form-default);
  font-style: normal;
  font-weight: var(--layout-font-weight-body-regular);
  line-height: var(--layout-font-line-height-body-md);
  letter-spacing: var(--layout-font-letter-spacing-form-default);
  text-align: center;
  .MuiChip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: normal;
  }
  &.qm--chip--icon-only {
    gap: 0;
    height: var(--layout-dimension-xl);
    width: var(--layout-dimension-xl);
    &.MuiChip-sizeSmall {
      height: var(--layout-dimension-lg);
      width: var(--layout-dimension-lg);
    }
  }
  &:active {
    border: var(--layout-border-weight-xs) solid var(--color-border-neutral-selected);
    background: var(--color-background-neutral-subtlest-selected);
    box-shadow: none;
  }
  &:disabled,
  &.Mui-disabled {
    border: var(--layout-border-weight-xs) solid var(--color-border-neutral-disabled);
    background: var(--color-background-neutral-subtlest-disabled);
    color: var(--color-text-action-disabled);
    opacity: 1;
  }
  &.MuiChip-sizeSmall {
    height: var(--layout-dimension-form-content-outer-compact);
    padding: var(--layout-padding-form-compact) var(--layout-gap-md);
    border-radius: var(--layout-border-radius-form-compact);
    font-size: var(--layout-font-size-form-compact);
    line-height: var(--layout-font-line-height-form-compact);
    letter-spacing: var(--layout-font-letter-spacing-form-compact);
    svg {
      width: var(--layout-dimension-icon-xs);
      height: var(--layout-dimension-icon-xs);
    }
  }
  &.qm--chip--clickable {
    cursor: pointer;
    &:hover {
      border: var(--layout-border-weight-xs) solid var(--color-border-neutral-hover);
      background: var(--color-background-neutral-subtlest-hover);
    }
  }
  &.qm--chip--active {
    background: var(--color-background-action-subtle-default);
    color: var(--color-text-action-default);
    border-color: transparent;
    &.qm--chip--clickable {
      &:hover {
        background: var(--color-background-action-subtle-hover);
      }
    }
    &:active {
      background: var(--color-background-action-subtle-selected);
      border: var(--layout-border-weight-xs) solid var(--color-border-action-subtle-selected);
      box-shadow: none;
    }
    &:disabled,
    &.Mui-disabled {
      background: var(--color-background-action-subtle-disabled);
      color: var(--color-text-action-disabled);
    }
  }
  svg {
    flex-shrink: 0;
    width: var(--layout-dimension-icon-sm);
    height: var(--layout-dimension-icon-sm);
    color: inherit;
    margin: 0;
    fill: currentcolor;
    &:hover {
      color: inherit;
    }
  }
  span {
    padding: 0;
  }
  &:not(.Mui-disabled, .qm--chip--active) {
    svg {
      color: var(--color-icon-default);
    }
  }
}

/* dist/components/Autocomplete/Autocomplete.css */
.qm--autocomplete-wrapper {
  font-family: var(--layout-font-family-default);
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap-md);
  &.is-full-width {
    width: 100%;
  }
  .MuiAutocomplete-endAdornment {
    right: var(--layout-padding-md);
  }
  .qm--autocomplete-input {
    flex: 1;
    background-color: transparent;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    height: auto;
    font-size: var(--layout-font-size-body-md);
    width: auto;
    field-sizing: content;
    color: var(--color-text-default);
    resize: none;
    min-height: var(--layout-dimension-form-content-inner-default);
    &::placeholder {
      font-style: normal;
      color: var(--color-text-subdued);
    }
    &.has-value {
      &::placeholder {
        color: var(--color-text-default);
      }
    }
  }
}
.qm--autocomplete-label {
  color: var(--color-text-subdued);
  line-height: var(--layout-font-line-height-body-sm);
  font-size: var(--layout-font-size-body-sm);
  font-weight: var(--layout-font-weight-body-semibold);
}
.qm--autocomplete {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  padding: var(--layout-padding-xs) var(--layout-padding-md);
  border: var(--layout-border-weight-xs) solid var(--color-border-default);
  font-weight: var(--layout-font-weight-body-regular);
  font-family: var(--layout-font-family-default);
  font-size: var(--layout-font-size-body-md);
  border-radius: var(--layout-border-radius-sm);
  min-height: var(--layout-dimension-form-content-outer-default);
  background-color: var(--color-background-elevated);
  &:focus-within,
  &:hover {
    border-color: var(--color-border-bold);
  }
  &.is-menu-open {
    .qm--autocomplete-toggle-button {
      transform: rotate(180deg);
    }
  }
}
.qm--autocomplete-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--layout-gap-xs);
  padding-right: var(--layout-padding-sm);
}
.qm--autocomplete-toggle-button {
  transition: transform 0.15s ease-in-out;
}
.qm--autocomplete-menu-popper {
  z-index: var(--z-layer-402);
}
.qm--autocomplete-menu {
  .qm--autocomplete-menu-header {
    padding: var(--layout-padding-sm) var(--layout-padding-md);
  }
  .qm--autocomplete-menu-footer {
    padding: var(--layout-padding-sm) var(--layout-padding-md);
    position: sticky;
    bottom: 0;
    background-color: var(--color-background-elevated);
    white-space: nowrap;
    font-size: var(--layout-font-size-body-sm);
    border-top: var(--layout-border-weight-xs) solid var(--color-border-default);
  }
  .MuiAutocomplete-loading,
  .MuiAutocomplete-noOptions {
    color: var(--color-text-default);
    padding: var(--layout-padding-sm) var(--layout-padding-md);
    font-size: var(--layout-font-size-body-md);
  }
  ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }
}
.qm--autocomplete-menu.MuiPaper-root {
  border-radius: var(--layout-border-radius-sm);
  border: var(--layout-border-weight-xs) solid var(--color-border-default);
  background-color: var(--color-background-elevated);
  box-shadow: var(--elevation-level-00-box-shadow);
  margin-top: var(--layout-margin-sm);
  min-width: 175px;
  margin-bottom: var(--element-spacing);
  .MuiAutocomplete-listbox {
    padding: 0;
  }
  .MuiListSubheader-root {
    line-height: var(--layout-dimension-form-content-outer-default);
    padding: var(--layout-padding-sm) var(--layout-padding-md);
    background-color: var(--color-background-elevated);
    color: var(--color-text-subdued);
    &:empty {
      display: none;
    }
  }
  .MuiAutocomplete-groupUl {
    border-bottom: var(--layout-border-weight-xs) solid var(--color-border-default);
    padding-bottom: var(--layout-padding-md);
  }
  .qm--autocomplete-item {
    padding: var(--layout-padding-sm) var(--layout-padding-md);
    border-radius: var(--layout-border-radius-sm);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    border: var(--layout-border-weight-xs) solid transparent;
    cursor: pointer;
    height: 100%;
    color: var(--color-text-default);
    font-family: var(--layout-font-family-default);
    gap: var(--layout-gap-md);
    .qm--autocomplete-item-label {
      display: block;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &.is-selected {
      background-color: var(--color-background-action-subtle-selected);
      font-weight: var(--layout-font-weight-body-semibold);
    }
    .is-match {
      font-weight: var(--layout-font-weight-body-semibold);
    }
  }
  .Mui-focused .qm--autocomplete-item.is-selected {
    background-color: var(--color-background-action-subtle-selected-nested);
  }
}
.qm--autocomplete-item-wrapper {
  padding: var(--layout-padding-xs);
}
.qm--autocomplete-item {
  font-family: var(--layout-font-family-default);
  font-size: var(--layout-font-size-body-md);
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
.Mui-focused .qm--autocomplete-item {
  background-color: var(--color-background-action-subtle-hover);
  &.is-selected {
    background-color: var(--color-background-action-subtle-selected-nested);
  }
}
.qm--autocomplete-menu-list {
  padding: var(--layout-padding-xs);
}
.qm--autocomplete-menu-item {
  padding: 0 var(--layout-padding-md);
}
.qm-autocomplete-clear-button {
  margin-right: var(--layout-padding-sm);
}
.qm--autocomplete-footer {
  padding: var(--layout-padding-sm) var(--layout-padding-md);
}
.qm--autocomplete-helper-text {
  font-size: var(--layout-font-size-form-compact);
  line-height: var(--layout-font-line-height-form-compact);
}
.qm--autocomplete-wrapper.is-ghost {
  .qm--autocomplete {
    border-color: transparent;
  }
  &:hover {
    .qm--autocomplete {
      border-color: var(--color-border-bold);
    }
  }
  &.is-menu-open,
  &:focus-within {
    .qm--autocomplete {
      border-color: var(--color-border-bold);
    }
  }
}
.qm--autocomplete-wrapper.is-compact {
  .qm--autocomplete {
    padding: var(--layout-padding-xs) var(--layout-padding-sm);
    min-height: var(--layout-dimension-form-content-outer-compact);
  }
  .qm--autocomplete-input {
    font-size: var(--layout-font-size-form-compact);
    min-height: var(--layout-dimension-form-content-inner-compact);
  }
}
.qm--autocomplete-menu.MuiPaper-root.is-compact {
  .qm--autocomplete-item {
    font-size: var(--layout-font-size-body-sm);
    padding: var(--layout-padding-md);
  }
}
.qm--autocomplete-wrapper.has-error {
  .qm--autocomplete {
    border-color: var(--color-border-negative-subtle-selected);
  }
  .qm--autocomplete-label {
    color: var(--color-text-negative-default);
  }
  .qm--autocomplete-helper-text {
    color: var(--color-text-negative-default);
  }
}
.qm--autocomplete-wrapper.is-disabled {
  cursor: not-allowed;
  color: var(--color-text-disabled);
  .qm--autocomplete {
    background-color: var(--color-background-disabled);
    border-color: var(--color-border-disabled);
    color: var(--color-text-disabled);
  }
  .qm--autocomplete-label {
    color: var(--color-text-disabled);
  }
  .qm--autocomplete-helper-text {
    color: var(--color-text-disabled);
  }
  .qm--autocomplete-input {
    cursor: not-allowed;
    color: var(--color-text-disabled);
  }
  .phosphor-icon {
    color: var(--color-icon-disabled);
  }
}

/* dist/components/Tooltip/Tooltip.css */
.qm--tooltip {
  .qm--tooltip-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--layout-gap-md);
    overflow: hidden;
    .qm--tooltip-content {
      display: flex;
      flex-direction: column;
      gap: var(--layout-gap-sm);
      .qm--tooltip-additional-content {
        display: flex;
      }
    }
  }
  .MuiTooltip-tooltip {
    display: flex;
    min-width: 45px;
    max-width: 240px;
    padding: var(--layout-padding-md);
    align-items: flex-start;
    gap: var(--layout-gap-sm);
    align-self: stretch;
    background: var(--color-background-neutral-subtle-inverted);
    border-radius: var(--layout-border-radius-container-default);
    box-shadow: 0 2px 4px -2px var(--color-effects-shadow-md), 0 4px 6px -1px var(--color-effects-shadow-md);
    color: var(--color-text-inverted);
    font-family: var(--layout-font-family-default);
    font-size: var(--layout-font-size-body-sm);
    font-style: normal;
    font-weight: var(--layout-font-weight-body-semibold);
    line-height: var(--layout-font-line-height-body-sm);
    letter-spacing: var(--layout-font-letter-spacing-body-sm);
  }
  &[data-popper-placement^=top] .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementTop {
    margin-bottom: var(--layout-padding-sm);
  }
  &[data-popper-placement^=bottom] .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom {
    margin-top: var(--layout-padding-sm);
  }
  &[data-popper-placement^=left] .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementLeft {
    margin-right: var(--layout-padding-sm);
  }
  &[data-popper-placement^=right] .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementRight {
    margin-left: var(--layout-padding-sm);
  }
  &.qm--tooltip--numeric .MuiTooltip-tooltip {
    justify-content: center;
  }
  &.qm--tooltip--hidden {
    pointer-events: none;
    .MuiTooltip-tooltip {
      opacity: 0;
      display: none;
    }
  }
}

/* dist/components/TextOverflow/TextOverflow.css */
.nova-text-overflow {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nova-text-overflow-url {
  direction: rtl;
}
.nova-text-overflow-clickable {
  cursor: pointer;
}
.nova-text-overflow-middle-ellipsis {
  display: flex;
  .nova-text-overflow-flexible {
    flex: 1 1 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nova-text-overflow-static {
    flex: 0;
  }
}
.nova-text-overflow-popout {
  --nova-text-overflow-z-index: 9999;
  background-color: var(--color-background-elevated);
  border-radius: var(--layout-corner-radius-sm);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-default);
  display: block;
  margin: var(--nova-text-overflow-popout-margin, -0.2em 10px 10px -0.4em);
  padding: var(--nova-text-overflow-popout-padding, 0.2em 0.4em);
  position: fixed;
  overflow-wrap: break-word;
  border: var(--layout-border-weight-xs) solid var(--color-border-default);
  z-index: var(--nova-text-overflow-z-index);
}
.nova-text-overflow-popout-inverse {
  color: var(--color-text-inverted);
  background-color: var(--color-background-inverted);
}
.nova-text-overflow-popout-modal {
  --nova-text-overflow-z-index: 10001;
}
.nova-text-overflow-popout-clickable {
  cursor: pointer;
}

/* dist/components/ListItem/ListItem.css */
.qm--list {
  &.qm--list--dense {
    .MuiListItem-root {
      padding-top: var(--layout-padding-xs);
      padding-bottom: var(--layout-padding-xs);
    }
  }
}
.qm--list-item {
  color: var(--color-text-default);
  font-family: var(--layout-font-family-default);
  font-size: var(--layout-font-size-body-md);
  font-weight: var(--layout-font-weight-body-regular);
  line-height: var(--layout-font-line-height-body-md);
  letter-spacing: var(--layout-font-letter-spacing-body-md);
  transition: background-color 0.2s ease;
  &.qm--list-item--selected {
    background-color: var(--color-background-action-subtle-selected);
    font-weight: var(--layout-font-weight-body-semibold);
    .MuiListItemText-primary {
      font-weight: var(--layout-font-weight-body-semibold);
    }
  }
  &.qm--list-item--disabled {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
    .MuiListItemText-primary,
    .MuiListItemText-secondary {
      color: var(--color-text-disabled);
    }
  }
  &.qm--list-item--dense {
    .MuiListItemText-root {
      margin: var(--layout-padding-xs) 0;
    }
    .MuiListItemText-primary {
      font-size: var(--layout-font-size-body-sm);
      line-height: var(--layout-font-line-height-body-sm);
    }
  }
  &.qm--list-item--button {
    cursor: pointer;
    &:hover:not(.qm--list-item--disabled) {
      background-color: var(--color-background-action-subtle-hover);
    }
    &:active:not(.qm--list-item--disabled) {
      background-color: var(--color-background-action-subtle-pressed);
    }
  }
  &.qm--list-item--checkbox {
    .MuiListItemIcon-root {
      min-width: auto;
      margin-right: var(--layout-gap-form-sm);
    }
  }
  &.qm--list-item--radio {
    .MuiListItemIcon-root {
      min-width: auto;
      margin-right: var(--layout-gap-form-sm);
    }
  }
  &.qm--list-item--nested {
    padding-left: var(--layout-padding-3xl);
  }
  .MuiListItemIcon-root {
    min-width: auto;
    margin-right: var(--layout-gap-form-md);
    color: var(--color-text-subdued);
  }
  .MuiListItemAvatar-root {
    min-width: auto;
    margin-right: var(--layout-gap-form-md);
  }
  .MuiListItemText-root {
    margin: 0;
    min-width: 0;
  }
  .MuiListItemText-primary {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
  }
  .MuiListItemText-secondary {
    color: var(--color-text-subdued);
    font-family: var(--layout-font-family-default);
    font-size: var(--layout-font-size-body-sm);
    line-height: var(--layout-font-line-height-body-sm);
    margin-top: var(--layout-padding-xs);
  }
  .MuiListItemSecondaryAction-root {
    position: relative;
    transform: none;
    top: auto;
    right: auto;
  }
  .qm--list-item-additional-value {
    color: var(--color-text-subdued);
    font-family: var(--layout-font-family-default);
    font-size: var(--layout-font-size-body-sm);
    font-weight: var(--layout-font-weight-body-regular);
    line-height: var(--layout-font-line-height-body-sm);
    margin-left: auto;
    padding-left: var(--layout-padding-md);
  }
}

/* dist/components/Radio/Radio.css */
label.qm--radio {
  padding-right: var(--layout-padding-md);
  margin-right: var(--layout-padding-md);
  align-items: flex-start;
  .MuiRadio-root {
    position: relative;
    border-radius: 0;
    padding: 0 var(--layout-padding-md);
    height: 20px;
    &:hover {
      background: none;
    }
  }
  &.MuiFormControlLabel-root {
    margin-bottom: 0;
  }
  .MuiFormControlLabel-label {
    color: var(--color-text-default);
    font-family: var(--layout-font-family-default);
    font-size: var(--layout-font-size-form-default);
    font-weight: var(--layout-font-weight-form-regular);
    line-height: var(--layout-font-line-height-form-default);
    letter-spacing: var(--layout-font-letter-spacing-form-default);
  }
  .qm--radio-icon {
    width: var(--layout-dimension-xs);
    height: var(--layout-dimension-xs);
    padding: var(--layout-padding-xs);
    margin: var(--layout-padding-2xs);
    border-radius: var(--layout-border-radius-full);
    border: var(--layout-border-weight-xs) solid var(--color-border-bold);
    background-color: var(--color-background-elevated);
    &.qm--radio-icon--selected {
      border: 3.5px solid var(--color-background-action-default);
      background-color: var(--color-icon-inverted);
    }
  }
  .MuiTouchRipple-root {
    overflow: visible;
    height: var(--layout-dimension-sm);
    width: var(--layout-dimension-sm);
    top: 2px;
    left: 7px;
    span.MuiTouchRipple-ripple {
      opacity: 1;
      span.MuiTouchRipple-child {
        background-color: transparent;
        outline: solid var(--color-icon-action-default) var(--layout-border-weight-sm);
        animation: none;
      }
    }
  }
  &:hover:not(.Mui-disabled) {
    .qm--radio-icon {
      background-color: var(--color-background-action-subtle-hover);
      &.qm--radio-icon--selected {
        border-color: var(--color-background-action-hover);
        background-color: var(--color-icon-inverted);
      }
    }
  }
}
.qm--radio-group {
  gap: var(--layout-gap-lg);
  margin-left: 3px;
  &.qm--radio-group--compact {
    gap: var(--layout-gap-md);
  }
}
.qm--radio-group.qm--radio-group--compact .qm--radio,
.qm--radio.qm--radio--compact {
  .MuiRadio-root {
    height: 12px;
  }
  .MuiTouchRipple-root {
    top: -2px;
  }
  .MuiFormControlLabel-label {
    font-size: var(--layout-font-size-form-compact);
    line-height: var(--layout-font-line-height-form-compact);
    letter-spacing: var(--layout-font-letter-spacing-form-compact);
  }
}
.qm--radio-group.qm--radio-group--disabled .qm--radio,
.qm--radio.Mui-disabled {
  pointer-events: none;
  .MuiFormControlLabel-label.MuiTypography-root {
    color: var(--color-text-disabled);
  }
  .qm--radio-icon {
    border: none;
    background-color: var(--color-background-action-disabled);
    &.qm--radio-icon--selected {
      border: 3.5px solid var(--color-background-action-disabled);
      background-color: var(--color-icon-neutral-disabled);
    }
  }
}

/* dist/components/List/List.css */
.qm--list {
  overflow: hidden;
  color: var(--color-text-default);
  text-overflow: ellipsis;
  font-family: var(--layout-font-family-default);
  font-size: var(--layout-font-size-body-sm);
  font-style: normal;
  font-weight: var(--layout-font-weight-body-regular);
  line-height: var(--layout-font-line-height-body-sm);
  letter-spacing: var(--layout-font-letter-spacing-body-sm);
  &.qm--list--full-width {
    width: 100%;
  }
  .MuiListSubheader-root {
    color: var(--color-text-subdued);
    background: var(--color-background-recessed);
  }
  a:hover:not(.qm--list-item--disabled) {
    color: var(--color-text-hyperlink-hover);
    cursor: pointer;
  }
}

/* dist/components/Button/Button.css */
.MuiButtonBase-root.qm--button {
  border-radius: var(--layout-border-radius-form-default);
  display: inline-flex;
  padding: var(--layout-padding-form-default);
  justify-content: center;
  align-items: center;
  position: relative;
  text-transform: none;
  border: var(--layout-border-weight-xs) solid transparent;
  font-family: var(--layout-font-family-default);
  font-size: var(--layout-font-size-form-default);
  font-style: normal;
  font-weight: var(--layout-font-weight-form-semibold);
  line-height: var(--layout-font-line-height-form-default);
  letter-spacing: var(--layout-font-letter-spacing-form-default);
  max-width: 100%;
  min-width: var(--layout-dimension-sm);
  height: var(--layout-dimension-form-content-outer-default);
  & svg {
    color: inherit;
    fill: currentcolor;
    height: var(--layout-dimension-icon-xs);
    width: var(--layout-dimension-icon-xs);
  }
  & svg.phosphor-icon {
    height: var(--layout-dimension-icon-sm);
    width: var(--layout-dimension-icon-sm);
  }
  &.qm--button-icon {
    min-width: initial;
    height: var(--layout-dimension-form-content-outer-default);
    width: var(--layout-dimension-form-content-outer-default);
    padding: 0;
    &.qm--button-size-compact {
      padding: 0;
      height: var(--layout-dimension-form-content-outer-compact);
      width: var(--layout-dimension-form-content-outer-compact);
    }
    &.qm--button-priority-hyperlink,
    &.qm--button-size-xs {
      padding: 0;
      height: var(--layout-dimension-sm);
      width: var(--layout-dimension-sm);
    }
    .qm--button-text {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    & svg {
      color: var(--color-icon-default);
      margin-left: 0;
      margin-right: 0;
    }
    &.Mui-disabled,
    &:disabled {
      & svg {
        fill: var(--color-icon-action-disabled);
      }
    }
  }
  & .MuiButton-endIcon {
    margin-right: 0;
    margin-left: var(--layout-padding-sm);
  }
  & .MuiButton-startIcon {
    margin-left: 0;
    margin-right: var(--layout-padding-sm);
  }
  &.qm--button-intent-action {
    background: var(--color-background-action-default);
    color: var(--color-text-action-inverted);
  }
  &.qm--button-intent-action.qm--button-priority-primary:hover {
    background: var(--color-background-action-hover);
  }
  &.qm--button-intent-action.qm--button-priority-primary:focus-visible,
  &.qm--button-intent-action.qm--button-priority-primary:active {
    background: var(--color-background-action-selected);
  }
  &.qm--button-intent-action.qm--button-priority-primary.qm--button-selected {
    background: var(--color-background-action-selected);
  }
  &.qm--button-intent-action.qm--button-priority-primary:disabled {
    background: var(--color-background-action-disabled);
  }
  &.qm--button-intent-action.qm--button-priority-secondary {
    background: var(--color-background-elevated);
    border-color: var(--color-border-action-default);
    color: var(--color-text-action-default);
  }
  &.qm--button-intent-action.qm--button-priority-secondary:hover {
    background: var(--color-background-action-subtle-hover);
    border-color: var(--color-border-action-hover);
  }
  &.qm--button-intent-action.qm--button-priority-secondary:focus-visible,
  &.qm--button-intent-action.qm--button-priority-secondary:active {
    background: var(--color-background-action-subtle-selected);
    border-color: var(--color-border-action-selected);
  }
  &.qm--button-intent-action.qm--button-priority-secondary.qm--button-selected {
    background: var(--color-background-action-subtle-selected);
    border-color: var(--color-border-action-selected);
  }
  &.qm--button-intent-action.qm--button-priority-secondary:disabled {
    background: var(--color-background-elevated);
    border-color: var(--color-border-action-subtle-disabled);
    color: var(--color-text-action-disabled);
  }
  &.qm--button-intent-action.qm--button-priority-tertiary {
    background: none;
    color: var(--color-text-action-default);
  }
  &.qm--button-intent-action.qm--button-priority-tertiary:hover {
    background: var(--color-background-action-subtle-hover);
    color: var(--color-text-action-hover);
  }
  &.qm--button-intent-action.qm--button-priority-tertiary:focus-visible,
  &.qm--button-intent-action.qm--button-priority-tertiary:active {
    background: var(--color-background-action-subtle-selected);
    color: var(--color-text-action-selected);
  }
  &.qm--button-intent-action.qm--button-priority-tertiary.qm--button-selected {
    background: var(--color-background-action-subtle-selected);
    color: var(--color-text-action-selected);
  }
  &.qm--button-intent-action.qm--button-priority-tertiary:disabled {
    color: var(--color-text-action-disabled);
  }
  &.qm--button-priority-hyperlink {
    padding: 0;
  }
  &.qm--button-intent-action.qm--button-priority-hyperlink {
    background: none;
    color: var(--color-text-action-default);
    border: none;
  }
  &.qm--button-intent-action.qm--button-priority-hyperlink:hover {
    color: var(--color-text-action-hover);
  }
  &.qm--button-intent-action.qm--button-priority-hyperlink:focus-visible,
  &.qm--button-intent-action.qm--button-priority-hyperlink:active {
    color: var(--color-text-action-selected);
  }
  &.qm--button-intent-action.qm--button-priority-hyperlink.qm--button-selected {
    color: var(--color-text-action-selected);
  }
  &.qm--button-intent-action.qm--button-priority-hyperlink.Mui-disabled,
  &.qm--button-intent-action.qm--button-priority-hyperlink:disabled {
    color: var(--color-text-action-disabled);
  }
  &.qm--button-intent-action.qm--button-priority-secondary.qm--button-nested:hover {
    background: var(--color-background-action-subtle-hover-nested);
    border-color: var(--color-border-action-hover);
    color: var(--color-text-action-hover);
  }
  &.qm--button-intent-action.qm--button-priority-secondary.qm--button-nested:focus-visible,
  &.qm--button-intent-action.qm--button-priority-secondary.qm--button-nested:active {
    background: var(--color-background-action-subtle-selected-nested);
    border-color: var(--color-border-action-selected);
    color: var(--color-text-action-selected);
  }
  &.qm--button-intent-action.qm--button-priority-secondary.qm--button-nested.qm--button-selected {
    background: var(--color-background-action-subtle-selected-nested);
    border-color: var(--color-border-action-selected);
    color: var(--color-text-action-selected);
  }
  &.qm--button-intent-action.qm--button-priority-tertiary.qm--button-nested:hover {
    background: var(--color-background-action-subtle-hover-nested);
    color: var(--color-text-action-hover);
  }
  &.qm--button-intent-action.qm--button-priority-tertiary.qm--button-nested:focus-visible,
  &.qm--button-intent-action.qm--button-priority-tertiary.qm--button-nested:active {
    background: var(--color-background-action-subtle-selected-nested);
    color: var(--color-text-action-selected);
  }
  &.qm--button-intent-action.qm--button-priority-tertiary.qm--button-nested.qm--button-selected {
    background: var(--color-background-action-subtle-selected-nested);
    color: var(--color-text-action-selected);
  }
  &.qm--button-intent-neutral {
    color: var(--color-text-subdued);
  }
  &.qm--button-intent-neutral.qm--button-priority-secondary {
    background: var(--color-background-elevated);
    border-color: var(--color-border-neutral-default);
  }
  &.qm--button-intent-neutral.qm--button-priority-secondary:hover {
    background: var(--color-background-neutral-subtle-hover);
    border-color: var(--color-border-neutral-hover);
  }
  &.qm--button-intent-neutral.qm--button-priority-secondary:focus-visible,
  &.qm--button-intent-neutral.qm--button-priority-secondary:active {
    background: var(--color-background-neutral-subtle-selected);
    border-color: var(--color-border-neutral-selected);
  }
  &.qm--button-intent-neutral.qm--button-priority-secondary.qm--button-selected {
    background: var(--color-background-neutral-subtle-selected);
    border-color: var(--color-border-neutral-selected);
  }
  &.qm--button-intent-neutral.qm--button-priority-secondary.Mui-disabled,
  &.qm--button-intent-neutral.qm--button-priority-secondary:disabled {
    background: var(--color-background-elevated);
    border-color: var(--color-border-neutral-disabled);
    color: var(--color-text-disabled);
  }
  &.qm--button-intent-neutral.qm--button-priority-tertiary:hover {
    background: var(--color-background-neutral-subtle-hover);
  }
  &.qm--button-intent-neutral.qm--button-priority-tertiary:focus-visible,
  &.qm--button-intent-neutral.qm--button-priority-tertiary:active {
    background: var(--color-background-neutral-subtle-selected);
  }
  &.qm--button-intent-neutral.qm--button-priority-tertiary.qm--button-selected {
    background: var(--color-background-neutral-subtle-selected);
  }
  &.qm--button-intent-neutral.qm--button-priority-tertiary.Mui-disabled,
  &.qm--button-intent-neutral.qm--button-priority-tertiary:disabled {
    background: var(--color-background-elevated);
    color: var(--color-text-disabled);
  }
  &.qm--button-intent-neutral.qm--button-priority-hyperlink:hover {
    background: none;
  }
  &.qm--button-intent-neutral.qm--button-priority-hyperlink:focus-visible,
  &.qm--button-intent-neutral.qm--button-priority-hyperlink:active {
    color: var(--color-text-subdued-selected);
  }
  &.qm--button-intent-neutral.qm--button-priority-hyperlink.qm--button-selected {
    color: var(--color-text-subdued-selected);
  }
  &.qm--button-intent-neutral.qm--button-priority-hyperlink.Mui-disabled,
  &.qm--button-intent-neutral.qm--button-priority-hyperlink:disabled {
    color: var(--color-text-disabled);
  }
  &.qm--button-intent-destructive {
    color: var(--color-text-negative-default);
  }
  &.qm--button-intent-destructive.qm--button-priority-primary {
    background: var(--color-background-negative-default);
    color: var(--color-text-negative-inverted);
  }
  &.qm--button-intent-destructive.qm--button-priority-primary:hover {
    background: var(--color-background-negative-hover);
    color: var(--color-text-negative-inverted);
  }
  &.qm--button-intent-destructive.qm--button-priority-primary:focus-visible,
  &.qm--button-intent-destructive.qm--button-priority-primary:active {
    background: var(--color-background-negative-selected);
    color: var(--color-text-negative-inverted);
  }
  &.qm--button-intent-destructive.qm--button-priority-primary.qm--button-selected {
    background: var(--color-background-negative-selected);
    color: var(--color-text-negative-inverted);
  }
  &.qm--button-intent-destructive.qm--button-priority-primary.Mui-disabled,
  &.qm--button-intent-destructive.qm--button-priority-primary:disabled {
    background: var(--color-background-negative-disabled);
    color: var(--color-text-negative-inverted);
  }
  &.qm--button-intent-destructive.qm--button-priority-secondary {
    background: var(--color-background-elevated);
    border-color: var(--color-border-negative-default);
    color: var(--color-text-negative-default);
  }
  &.qm--button-intent-destructive.qm--button-priority-secondary:hover {
    background: var(--color-background-negative-subtle-hover);
    border-color: var(--color-border-negative-hover);
    color: var(--color-text-negative-hover);
  }
  &.qm--button-intent-destructive.qm--button-priority-secondary:focus-visible,
  &.qm--button-intent-destructive.qm--button-priority-secondary:active {
    background: var(--color-background-negative-subtle-selected);
    border-color: var(--color-border-negative-selected);
    color: var(--color-text-negative-selected);
  }
  &.qm--button-intent-destructive.qm--button-priority-secondary.qm--button-selected {
    background: var(--color-background-negative-subtle-selected);
    border-color: var(--color-border-negative-selected);
    color: var(--color-text-negative-selected);
  }
  &.qm--button-intent-destructive.qm--button-priority-secondary.Mui-disabled,
  &.qm--button-intent-destructive.qm--button-priority-secondary:disabled {
    background: var(--color-background-elevated);
    border-color: var(--color-border-negative-subtle-disabled);
    color: var(--color-text-negative-disabled);
  }
  &.qm--button-intent-destructive.qm--button-priority-tertiary:hover {
    background: var(--color-background-negative-subtle-hover);
    color: var(--color-text-negative-hover);
  }
  &.qm--button-intent-destructive.qm--button-priority-tertiary:focus-visible,
  &.qm--button-intent-destructive.qm--button-priority-tertiary:active {
    background: var(--color-background-negative-subtle-selected);
    color: var(--color-text-negative-selected);
  }
  &.qm--button-intent-destructive.qm--button-priority-tertiary.qm--button-selected {
    background: var(--color-background-negative-subtle-selected);
    color: var(--color-text-negative-selected);
  }
  &.qm--button-intent-destructive.qm--button-priority-tertiary.Mui-disabled,
  &.qm--button-intent-destructive.qm--button-priority-tertiary:disabled {
    color: var(--color-text-negative-disabled);
  }
  &.qm--button-intent-destructive.qm--button-priority-hyperlink:hover {
    background: none;
    color: var(--color-text-negative-hover);
  }
  &.qm--button-intent-destructive.qm--button-priority-hyperlink:focus-visible,
  &.qm--button-intent-destructive.qm--button-priority-hyperlink:active {
    color: var(--color-text-negative-selected);
  }
  &.qm--button-intent-destructive.qm--button-priority-hyperlink.qm--button-selected {
    color: var(--color-text-negative-selected);
  }
  &.qm--button-intent-destructive.qm--button-priority-hyperlink.Mui-disabled,
  &.qm--button-intent-destructive.qm--button-priority-hyperlink:disabled {
    color: var(--color-text-negative-disabled);
  }
  &.qm--button-size-compact {
    padding: var(--layout-padding-sm) var(--layout-padding-md);
    font-size: var(--layout-font-size-form-compact);
    line-height: normal;
    letter-spacing: var(--layout-font-letter-spacing-form-compact);
    height: var(--layout-dimension-form-content-outer-compact);
    white-space: nowrap;
    &.qm--button-priority-hyperlink {
      padding: 0;
    }
  }
}
.qm--button-text {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.MuiButtonBase-root.qm--button.qm--button-loading {
  cursor: not-allowed;
  pointer-events: none;
  .qm--button-text {
    visibility: hidden;
  }
}
.qm--button-spinner {
  display: inline-block;
  width: var(--layout-dimension-icon-sm);
  height: var(--layout-dimension-icon-sm);
  position: absolute;
}
.qm--button-spinner::before,
.qm--button-spinner::after {
  content: "";
  border-radius: 50%;
  display: block;
  position: absolute;
  inset: 0;
  border-width: 2px;
  border-style: solid;
}
.qm--button-spinner::before {
  border-color: currentcolor;
  opacity: 0.3;
}
.qm--button-spinner::after {
  border-color: transparent;
  border-top-color: currentcolor;
  animation: qm-button-spinner-animation 1s cubic-bezier(0.18, 0.54, 0.61, 0.14) infinite;
}
@keyframes qm-button-spinner-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* dist/components/TextField/TextField.css */
.qm--text-field {
  outline: none;
  &:focus {
    outline: none;
  }
  &::before,
  &::after {
    display: none;
  }
  textarea,
  input[type=text],
  input[type=number],
  input[type=email],
  input[type=password],
  input[type=date],
  input[type=tel] {
    border: none;
  }
  font-size: inherit;
  background-color: transparent;
  box-shadow: none;
  width: 100%;
  padding: var(--layout-padding-none);
  border: var(--layout-border-weight-xs) solid var(--color-border-default);
  .qm--text-field-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--layout-gap-form-md);
  }
  &.qm--text-field--regular {
    padding: var(--layout-padding-form-default) var(--layout-padding-md);
    border-radius: var(--layout-border-radius-md);
    background: var(--color-background-elevated);
    color: var(--color-text-default);
    font-style: normal;
    height: var(--layout-dimension-form-content-outer-default);
    &:not(.qm--text-field--multiline) {
      display: flex;
      align-items: center;
      .qm--text-field-content {
        width: 100%;
      }
    }
    font-family: var(--layout-font-family-default);
    font-size: var(--layout-font-size-form-default);
    font-weight: var(--layout-font-weight-body-regular);
    line-height: var(--layout-font-line-height-form-default);
    letter-spacing: var(--layout-font-letter-spacing-form-default);
    input {
      height: var(--layout-font-line-height-form-default);
      padding: 0;
      background: inherit;
      &:disabled {
        color: var(--color-text-disabled);
        -webkit-text-fill-color: var(--color-text-disabled);
      }
    }
  }
  &.qm--text-field--multiline {
    height: auto;
  }
  &.qm--text-field--flexible-height {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    .qm--text-field-content {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      overflow: hidden;
    }
    .MuiInputBase-root {
      flex: 1;
      flex-direction: column;
      align-items: stretch;
    }
    textarea {
      flex: 1;
      resize: none;
      height: 100% !important;
      overflow: auto !important;
    }
  }
  &.qm--text-field--compact {
    padding: var(--layout-padding-md);
    height: var(--layout-dimension-form-content-outer-compact);
    display: flex;
    align-items: center;
    gap: var(--layout-gap-form-md);
    align-self: stretch;
    color: var(--color-text-default);
    font-family: var(--layout-font-family-default);
    font-size: var(--layout-font-size-form-compact);
    font-style: normal;
    font-weight: 400;
    line-height: var(--layout-font-line-height-form-compact);
    letter-spacing: var(--layout-font-letter-spacing-form-compact);
    border-radius: var(--layout-border-radius-sm);
    border: var(--layout-border-weight-xs) solid var(--color-border-default);
    background: var(--color-background-elevated);
    .qm--text-field-content {
      width: 100%;
    }
    input::placeholder {
      font-size: var(--layout-font-size-form-compact);
      line-height: var(--layout-font-line-height-form-compact);
      letter-spacing: var(--layout-font-letter-spacing-form-compact);
    }
    input {
      height: var(--layout-font-line-height-form-compact);
      padding: 0;
      background: inherit;
      font-size: var(--layout-font-size-form-compact);
      line-height: var(--layout-font-line-height-form-compact);
      letter-spacing: var(--layout-font-letter-spacing-form-compact);
    }
  }
  .qm--text-field-start-icon,
  .qm--text-field-end-icon {
    display: flex;
  }
  input,
  textarea {
    padding: 0;
    color: var(--color-text-default);
    font-family: var(--layout-font-family-default);
    font-size: var(--layout-font-size-form-default);
    font-style: normal;
    font-weight: var(--layout-font-weight-form-regular);
    line-height: var(--layout-font-line-height-form-default);
    letter-spacing: var(--layout-font-letter-spacing-form-default);
  }
  input::placeholder {
    color: var(--color-text-subdued);
    opacity: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--layout-font-family-default);
    font-size: var(--layout-font-size-form-default);
    font-style: normal;
    font-weight: var(--layout-font-weight-form-regular);
    line-height: var(--layout-font-line-height-form-default);
    letter-spacing: var(--layout-font-letter-spacing-form-default);
  }
  textarea::placeholder {
    color: var(--color-text-subdued);
    opacity: 1;
  }
  &:focus-within {
    border: var(--layout-border-weight-xs) solid var(--color-border-bold);
  }
  &.has-error {
    border: var(--layout-border-weight-xs) solid var(--color-border-negative-subtle-selected);
  }
  .MuiInputBase-root {
    padding: 0;
  }
}
.qm--text-field-container {
  display: flex;
  padding: var(--layout-padding-none);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--layout-gap-form-md);
  &.qm--text-field-container--full-width {
    width: 100%;
  }
}
.qm--text-field-helper-text {
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--layout-font-family-default);
  font-size: var(--layout-font-size-form-compact);
  font-style: normal;
  font-weight: 400;
  line-height: var(--layout-font-line-height-form-compact);
  letter-spacing: var(--layout-font-letter-spacing-form-compact);
  &.qm--text-field-helper-text--error {
    color: var(--color-text-negative-default);
  }
}
.qm--text-field-bottom-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--layout-padding-xs);
}
.qm--text-field-label {
  overflow: hidden;
  color: var(--color-text-subdued);
  text-overflow: ellipsis;
  font-family: var(--layout-font-family-default);
  font-size: var(--layout-font-size-body-sm);
  font-style: normal;
  font-weight: var(--layout-font-weight-body-semibold);
  line-height: var(--layout-font-line-height-body-sm);
  letter-spacing: var(--layout-font-letter-spacing-body-sm);
}
.qm--text-field-attachments {
  min-width: 0;
  margin-bottom: var(--layout-gap-md);
}

/* dist/components/Megaselector/Megaselector.css */
.qm--megaselector.qm--megaselector {
  background: var(--color-background-elevated);
  border: var(--layout-border-weight-xs) solid var(--color-border-default);
  border-radius: var(--layout-border-radius-md);
  box-shadow: 0 2px 4px -2px var(--color-effects-shadow-md), 0 4px 6px -1px var(--color-effects-shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap-lg);
  margin-top: var(--layout-gap-sm);
  max-height: calc(100vh - 32px);
  overflow-y: hidden;
  padding: var(--layout-padding-lg);
  padding-bottom: 0;
}
.qm--megaselector-close {
  display: flex;
  justify-content: flex-end;
}
.qm--megaselector-search {
  width: 100%;
}
.qm--megaselector-columns {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.qm--megaselector--columns-2 .qm--megaselector-columns > :first-child,
.qm--megaselector--columns-3 .qm--megaselector-columns > :first-child {
  flex: 0 0 212px;
}
.qm--megaselector-columns > * {
  flex: 1;
  min-width: 0;
}
.qm--megaselector-column {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap-lg);
  max-height: var(--megaselector-column-max-height);
  overflow-y: auto;
  padding: 0 var(--layout-padding-lg);
  padding-bottom: var(--layout-padding-lg);
}
.qm--megaselector-column > * {
  flex-shrink: 0;
}
.qm--megaselector-column:first-child {
  padding-left: 0;
}
.qm--megaselector-column:last-child {
  padding-right: 0;
}
.qm--megaselector-column:not(:first-child) {
  border-left: var(--layout-border-weight-xs) solid var(--color-border-default);
}
.qm--megaselector-empty-state {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap-md);
  padding: var(--layout-padding-lg);
}
.qm--megaselector-empty-state-content {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap-sm);
}
.qm--megaselector-empty-state-title {
  color: var(--color-text-default);
  font-family: var(--layout-font-family-default);
  font-size: var(--layout-font-size-heading-sm);
  font-weight: var(--layout-font-weight-header-sm);
  line-height: var(--layout-font-line-height-heading-sm);
}
.qm--megaselector-empty-state-body {
  color: var(--color-text-subdued);
  font-family: var(--layout-font-family-default);
  font-size: var(--layout-font-size-body-sm);
  line-height: var(--layout-font-line-height-body-sm);
}
.qm--megaselector-empty-state-action .MuiButtonBase-root.qm--button {
  font-family: var(--layout-font-family-default);
  font-size: var(--layout-font-size-form-compact);
  font-weight: var(--layout-font-weight-form-regular);
  line-height: var(--layout-font-line-height-form-compact);
  letter-spacing: var(--layout-font-letter-spacing-form-compact);
  padding-left: 0;
}
.qm--megaselector-empty-state-action .MuiButtonBase-root.qm--button .qm--button-text {
  align-items: center;
  display: flex;
  gap: var(--layout-gap-sm);
}
.qm--megaselector-footer {
  display: flex;
  align-items: center;
  gap: var(--layout-gap-none);
  padding: 0 0 var(--layout-padding-lg) var(--layout-padding-lg);
  width: 100%;
}
.qm--megaselector-footer-action {
  flex: 1;
  min-width: 0;
}
.qm--megaselector-footer-buttons {
  display: flex;
  align-items: center;
  gap: var(--layout-gap-md);
}
.qm--megaselector-hint {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap-sm);
  padding: var(--layout-padding-lg);
  overflow: auto;
  max-height: var(--megaselector-column-max-height);
}
.qm--megaselector-hint-title {
  color: var(--color-text-default);
  font-family: var(--layout-font-family-default);
  font-size: var(--layout-font-size-heading-sm);
  font-weight: var(--layout-font-weight-header-sm);
  line-height: var(--layout-font-line-height-heading-sm);
}
.qm--megaselector-hint-body {
  color: var(--color-text-subdued);
  font-family: var(--layout-font-family-default);
  font-size: var(--layout-font-size-body-sm);
  line-height: var(--layout-font-line-height-body-sm);
}

/* dist/components/Breadcrumbs/Breadcrumbs.css */
.qm--breadcrumbs-wrapper {
  display: flex;
  gap: var(--layout-gap-xs);
  .MuiBreadcrumbs-ol {
    display: flex;
    align-items: center;
    max-height: var(--layout-dimension-sm);
    .MuiBreadcrumbs-li {
      line-height: var(--layout-dimension-form-content-inner-compact);
    }
  }
  a.qm--breadcrumb {
    cursor: pointer;
    text-decoration: none;
    &:hover {
      text-decoration: underline solid var(--color-text-subdued) 5%;
      text-decoration-skip-ink: auto;
      text-underline-offset: 20%;
      text-underline-position: from-font;
    }
  }
  .qm--breadcrumb {
    display: flex;
    align-items: center;
    color: var(--color-text-subdued);
    height: var(--layout-dimension-sm);
    .qm--breadcrumb-text-label {
      font-family: var(--layout-font-family-default);
      font-size: var(--layout-font-size-body-sm);
      font-style: normal;
      font-weight: var(--layout-font-weight-body-semibold);
      line-height: var(--layout-dimension-form-content-inner-compact);
      letter-spacing: var(--layout-font-letter-spacing-body-sm);
    }
    .qm--breadcrumb-link-label {
      color: var(--color-text-subdued);
      font-family: var(--layout-font-family-default);
      font-size: var(--layout-font-size-form-compact);
      font-style: normal;
      font-weight: var(--layout-font-weight-body-regular);
      line-height: var(--layout-dimension-form-content-inner-compact);
      letter-spacing: var(--layout-font-letter-spacing-form-compact);
    }
  }
  svg {
    fill: var(--color-icon-default);
    margin-right: var(--layout-gap-sm);
    width: var(--layout-dimension-icon-xs);
    height: var(--layout-dimension-icon-xs);
  }
  .MuiBreadcrumbs-separator {
    margin-left: var(--layout-gap-sm);
    margin-right: var(--layout-gap-sm);
    font-size: var(--layout-font-size-body-md);
    line-height: var(--layout-dimension-form-content-inner-compact);
  }
}

/* dist/components/Progress/Progress.css */
.qm--progress-wrapper {
  display: inline-flex;
  &:has(.qm--progress-circular) {
    width: var(--layout-dimension-2xl);
    height: var(--layout-dimension-2xl);
  }
  .qm--progress-circular {
    display: flex;
    position: relative;
    .qm--progress-label {
      text-shadow:
        -1px -1px 0 var(--color-text-inverted),
        1px -1px 0 var(--color-text-inverted),
        -1px 1px 0 var(--color-text-inverted),
        1px 1px 0 var(--color-text-inverted);
    }
  }
  .qm--progress-linear {
    display: flex;
    flex: 0 0 auto;
    position: relative;
    width: 100%;
    align-items: center;
    gap: var(--layout-gap-md);
    .qm--progress-label {
      min-width: var(--layout-dimension-xl);
    }
  }
  span.qm--progress {
    height: var(--layout-dimension-2xs);
    &.MuiLinearProgress-root {
      display: block;
      width: 100%;
      border-radius: var(--layout-border-radius-xs);
      background: var(--color-background-neutral-default);
      .MuiLinearProgress-bar {
        height: 100%;
        border-radius: var(--layout-border-radius-xs);
        background: var(--color-background-action-default);
      }
      &.qm--progress-neutral {
        .MuiLinearProgress-bar {
          background: var(--color-background-scrollbar-default);
        }
      }
    }
    &.MuiCircularProgress-root {
      width: fit-content;
      .MuiCircularProgress-circle {
        stroke-linecap: round;
      }
      svg {
        color: var(--color-background-action-default);
      }
      &.MuiCircularProgress-determinate {
        position: absolute;
        left: 0;
        top: 0;
      }
      &.qm--progress-neutral {
        svg {
          color: var(--color-background-scrollbar-default);
        }
      }
    }
  }
  span.qm--progress-circular-track {
    svg {
      color: var(--color-background-neutral-default);
    }
  }
  .qm--progress-label {
    flex: 0 0 auto;
    color: var(--color-text-default);
    font-family: var(--layout-font-family-default);
    font-size: var(--layout-font-size-form-compact);
    font-style: normal;
    font-weight: var(--layout-font-weight-body-regular);
    line-height: var(--layout-font-line-height-form-compact);
    letter-spacing: var(--layout-font-letter-spacing-form-compact);
    white-space: nowrap;
    &.qm--progress-label-circular {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

/* dist/components/Tile/Tile.css */
.MuiCard-root.qm--tile {
  display: flex;
  place-content: center;
  width: 100%;
  flex: 1 1 auto;
  background-color: var(--color-background-recessed);
  box-shadow: none;
  border-radius: var(--layout-border-radius-md);
  border: var(--layout-border-weight-xs) solid var(--color-border-action-subtle-default);
  &:hover,
  &:active,
  &:focus,
  &:has(.Mui-focusVisible),
  &.qm--tile-selected {
    background-color: var(--color-background-elevated);
    box-shadow: 0 1px 2px -1px var(--color-effects-shadow-sm), 0 1px 3px 0 var(--color-effects-shadow-sm);
  }
  &:active,
  &:focus,
  &:has(.Mui-focusVisible),
  &.qm--tile-selected {
    outline: var(--layout-border-weight-sm) solid var(--color-border-action-subtle-selected);
    outline-offset: calc(-1 * var(--layout-border-weight-sm));
    svg {
      fill: var(--color-icon-action-default);
    }
  }
  &.qm--tile-title-only {
    .qm--tile-inner {
      align-items: center;
    }
  }
  .qm--tile-action-area {
    width: 100%;
    height: 100%;
    background: transparent;
    background-color: transparent;
    display: flex;
    align-items: start;
    justify-content: start;
    span.MuiCardActionArea-focusHighlight {
      opacity: 0;
      background-color: transparent;
    }
  }
  .qm--tile-inner {
    display: flex;
    align-items: flex-start;
    gap: var(--layout-gap-md);
    padding: var(--layout-padding-xl);
    .qm--tile-content-container {
      display: flex;
      flex-direction: column;
      gap: var(--layout-gap-sm);
    }
    .qm--tile-header {
      margin: 0;
      padding: 0;
      .MuiCardHeader-title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        align-self: stretch;
        overflow: hidden;
        color: var(--color-text-default);
        text-overflow: ellipsis;
        font-family: var(--layout-font-family-default);
        font-size: var(--layout-font-size-body-sm);
        font-style: normal;
        font-weight: var(--layout-font-weight-heading-sm);
        line-height: var(--layout-font-line-height-body-sm);
        letter-spacing: var(--layout-font-letter-spacing-body-sm);
      }
    }
    .qm--tile-content {
      margin: 0;
      padding: 0;
      .MuiTypography-body2 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        align-self: stretch;
        overflow: hidden;
        color: var(--color-text-subdued);
        text-overflow: ellipsis;
        font-family: var(--layout-font-family-default);
        font-size: var(--layout-font-size-body-sm);
        font-style: normal;
        font-weight: var(--layout-font-weight-body-regular);
        line-height: var(--layout-font-line-height-body-sm);
        letter-spacing: var(--layout-font-letter-spacing-body-sm);
      }
    }
  }
  svg {
    width: var(--layout-dimension-icon-lg);
    height: var(--layout-dimension-icon-lg);
    flex-shrink: 0;
    fill: var(--color-icon-default);
  }
}

/* dist/components/Alert/Alert.css */
.qm--alert.MuiAlert-root {
  border-radius: var(--layout-border-radius-container-default);
  border: var(--layout-border-weight-xs) solid var(--color-border-default);
  background: var(--color-background-elevated);
  box-shadow: 0 1px 3px 0 var(--color-effects-shadow-xs);
  display: flex;
  min-width: 360px;
  padding: var(--layout-padding-md) var(--layout-padding-lg);
  gap: var(--layout-gap-none);
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  @media (width <= 425px) {
    min-width: 0;
  }
  .MuiAlert-message {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    padding: 0;
    overflow: hidden;
    color: var(--color-text-default);
    text-overflow: ellipsis;
    font-family: var(--layout-font-family-default);
    font-size: var(--layout-font-size-body-md);
    font-style: normal;
    font-weight: var(--layout-font-weight-body-semibold);
    line-height: var(--layout-font-line-height-body-md);
    letter-spacing: var(--layout-font-letter-spacing-body-md);
  }
  .MuiAlertTitle-root {
    overflow: hidden;
    color: var(--color-text-subdued);
    text-overflow: ellipsis;
    font-family: var(--layout-font-family-default);
    font-size: var(--layout-font-size-body-md);
    font-style: normal;
    font-weight: var(--layout-font-weight-body-regular);
    line-height: var(--layout-font-line-height-body-md);
    letter-spacing: var(--layout-font-letter-spacing-body-md);
  }
  .MuiAlert-icon {
    padding: 0;
  }
  .MuiAlert-action {
    align-self: flex-start;
    margin: 0 0 0 var(--layout-gap-sm);
    padding: 0;
  }
  &.qm--alert-with-description {
    .qm--alert-action {
      align-self: stretch;
    }
    .MuiAlert-icon {
      align-self: stretch;
      padding-top: 1px;
    }
  }
  &.qm--alert-action-wrap {
    .MuiAlert-message {
      flex-wrap: wrap;
      row-gap: var(--layout-gap-sm);
    }
    .qm--alert-action {
      margin-left: auto;
    }
  }
}
.qm--alert-success {
  .phosphor-icon {
    color: var(--color-icon-positive-default);
  }
}
.qm--alert-error {
  .phosphor-icon {
    color: var(--color-background-negative-default);
  }
}
.qm--alert-warning {
  .phosphor-icon {
    color: var(--color-icon-warning-default);
  }
}
.qm--alert-info {
  .phosphor-icon {
    color: var(--color-icon-informational-default);
  }
}

/* dist/components/Pill/Pill.css */
.MuiChip-root.qm--pill {
  display: flex;
  align-items: center;
  height: var(--layout-dimension-form-content-outer-compact);
  padding: var(--layout-padding-xs) var(--layout-padding-md);
  border-radius: var(--layout-border-radius-full);
  background: var(--color-background-inverted);
  opacity: 1;
  white-space: nowrap;
  text-transform: uppercase;
  width: fit-content;
  color: var(--color-text-neutral-default);
  text-align: center;
  font-family: var(--layout-font-family-default);
  font-size: var(--layout-font-size-body-xs);
  font-style: normal;
  font-weight: var(--layout-font-weight-body-semibold);
  line-height: var(--layout-font-line-height-body-md);
  letter-spacing: var(--layout-font-letter-spacing-form-default);
  &.MuiChip-sizeSmall {
    height: var(--layout-dimension-sm);
    padding: var(--layout-padding-none) var(--layout-padding-md);
    line-height: var(--layout-dimension-sm);
  }
  .MuiChip-label {
    padding: 0;
  }
  &.qm--pill-neutral {
    background: var(--color-background-neutral-subtle-default);
    color: var(--color-text-subdued);
  }
  &.qm--pill-action-subtle {
    background: var(--color-background-action-subtle-default);
    color: var(--color-text-action-default);
  }
}

/* dist/components/Tag/Tag.css */
.qm--tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--layout-gap-xs);
  padding: var(--layout-padding-sm);
  border-radius: var(--layout-border-radius-xs);
  height: var(--layout-dimension-lg);
  box-sizing: border-box;
}
.qm--tag-intent-positive {
  color: var(--color-text-positive-default);
  background-color: var(--color-background-positive-subtle-default);
}
.qm--tag-intent-informational {
  color: var(--color-text-informational-default);
  background-color: var(--color-background-informational-subtle-default);
}
.qm--tag-intent-anomaly {
  color: var(--color-text-anomaly-default);
  background-color: var(--color-background-anomaly-subtle-default);
}
.qm--tag-intent-warning {
  color: var(--color-text-warning-default);
  background-color: var(--color-background-warning-subtle-default);
}
.qm--tag-intent-negative {
  color: var(--color-text-negative-default);
  background-color: var(--color-background-negative-subtle-default);
}
.qm--tag-intent-neutral {
  color: var(--color-text-subdued);
  background-color: var(--color-background-neutral-subtle-default);
}
.qm--tag-intent-outline {
  color: var(--color-text-subdued);
  border: var(--layout-border-weight-xs) solid var(--color-border-default);
}
.qm--tag-compact {
  padding: var(--layout-padding-xs) var(--layout-padding-sm);
  max-height: 16px;
}
.qm--tag-icon-only {
  width: var(--layout-dimension-lg);
  padding: var(--layout-padding-sm);
  gap: 0;
}
.qm--tag-icon-only.qm--tag-compact {
  width: var(--layout-dimension-sm);
  padding: var(--layout-padding-xs);
}
.qm--tag-icon-only.qm--tag-compact .qm--tag-icon-left {
  width: var(--layout-dimension-icon-xs);
  height: var(--layout-dimension-icon-xs);
}
.qm--tag-icon-only.qm--tag-compact .qm--tag-icon-left svg {
  width: var(--layout-dimension-icon-xs);
  height: var(--layout-dimension-icon-xs);
}
.qm--tag-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.qm--tag-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  text-align: center;
  white-space: nowrap;
}
.qm--tag-icon-left {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--layout-dimension-xs);
  height: var(--layout-dimension-xs);
}
.qm--tag-icon-left svg {
  width: var(--layout-dimension-xs);
  height: var(--layout-dimension-xs);
  color: inherit;
  fill: currentcolor;
}
.MuiButtonBase-root.qm--tag-close-button,
.qm--tag-close-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--layout-dimension-xs) !important;
  height: var(--layout-dimension-xs) !important;
  min-width: var(--layout-dimension-xs) !important;
  padding: 0 !important;
  margin: 0;
  border: none !important;
  background: none !important;
  cursor: pointer;
}
.qm--tag .MuiButtonBase-root.qm--button.qm--tag-close-button {
  color: inherit;
}
.MuiButtonBase-root.qm--tag-close-button .qm--button-text,
.qm--tag-close-button .qm--button-text {
  width: var(--layout-dimension-xs);
  height: var(--layout-dimension-xs);
}
.qm--tag-close-icon {
  width: var(--layout-dimension-xs) !important;
  height: var(--layout-dimension-xs) !important;
  color: inherit;
  fill: currentcolor;
}
.qm--tag .MuiButtonBase-root.qm--button.qm--tag-close-button:hover,
.qm--tag .MuiButtonBase-root.qm--button.qm--tag-close-button:focus-visible,
.qm--tag .MuiButtonBase-root.qm--button.qm--tag-close-button:active {
  color: inherit;
}
.MuiButtonBase-root.qm--tag-close-button:hover,
.qm--tag-close-button:hover {
  opacity: 0.7;
  background: none !important;
}
.MuiButtonBase-root.qm--tag-close-button:focus,
.qm--tag-close-button:focus {
  outline: none;
}
.MuiButtonBase-root.qm--tag-close-button:focus-visible,
.qm--tag-close-button:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 1px;
  border-radius: var(--layout-border-radius-xs);
  background: none !important;
}

/* dist/components/HoverCard/HoverCard.css */
:root {
  --qm--hover-card-column-width: 166px;
}
.MuiPaper-root.qm--hover-card {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap-lg);
  padding: var(--layout-padding-xl);
  max-width: 380px;
  border-radius: var(--layout-border-radius-container-default);
  border: var(--layout-border-weight-xs) solid var(--color-border-default);
  background: var(--color-background-elevated);
  box-shadow: 0 2px 4px -2px var(--color-effects-shadow-md), 0 4px 6px -1px var(--color-effects-shadow-md);
  .qm--hover-card-header {
    display: flex;
    align-items: center;
    gap: var(--layout-gap-md);
    width: 100%;
  }
  .qm--hover-card-title {
    flex: 1;
    min-width: 0;
    color: var(--color-text-default);
    font-family: var(--layout-font-family-default);
    font-size: var(--layout-font-size-form-default);
    font-weight: var(--layout-font-weight-body-semibold);
    line-height: var(--layout-font-line-height-form-default);
    letter-spacing: var(--layout-font-letter-spacing-form-default);
  }
  .qm--hover-card-tag {
    flex-shrink: 0;
  }
  .qm--hover-card-description {
    color: var(--color-text-subdued);
    font-family: var(--layout-font-family-default);
    font-size: var(--layout-font-size-body-sm);
    font-weight: var(--layout-font-weight-body-regular);
    line-height: var(--layout-font-line-height-body-sm);
    letter-spacing: var(--layout-font-letter-spacing-body-sm);
  }
  .qm--hover-card-section {
    display: flex;
    flex-direction: column;
    gap: var(--layout-gap-sm);
  }
  .qm--hover-card-section-title {
    color: var(--color-text-default);
    font-family: var(--layout-font-family-default);
    font-size: var(--layout-font-size-body-sm);
    font-weight: var(--layout-font-weight-body-semibold);
    line-height: var(--layout-font-line-height-body-sm);
    letter-spacing: var(--layout-font-letter-spacing-body-sm);
  }
  .qm--hover-card-section-description {
    color: var(--color-text-subdued);
    font-family: var(--layout-font-family-default);
    font-size: var(--layout-font-size-body-sm);
    font-weight: var(--layout-font-weight-body-regular);
    line-height: var(--layout-font-line-height-body-sm);
    letter-spacing: var(--layout-font-letter-spacing-body-sm);
  }
  .qm--hover-card-columns {
    display: flex;
    gap: var(--layout-gap-xl);
  }
  .qm--hover-card-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--layout-gap-md);
    width: var(--qm--hover-card-column-width);
    flex-shrink: 0;
    &:only-child {
      width: 100%;
    }
  }
  .qm--hover-card-columns-space-between {
    justify-content: space-between;
    .qm--hover-card-column {
      width: auto;
      flex-shrink: 1;
    }
  }
  .qm--hover-card-value {
    display: flex;
    align-items: center;
    gap: var(--layout-gap-sm);
    min-width: 0;
    max-width: 100%;
  }
  .qm--hover-card-value-icon {
    flex-shrink: 0;
    width: var(--layout-dimension-icon-sm);
    height: var(--layout-dimension-icon-sm);
    color: var(--color-icon-subdued);
  }
  .qm--hover-card-value-label {
    white-space: nowrap;
    color: var(--color-text-subdued);
    font-family: var(--layout-font-family-default);
    font-size: var(--layout-font-size-body-sm);
    font-weight: var(--layout-font-weight-body-regular);
    line-height: var(--layout-font-line-height-body-sm);
    letter-spacing: var(--layout-font-letter-spacing-body-sm);
  }
  .qm--hover-card-data-section {
    display: flex;
    align-items: center;
    gap: var(--layout-gap-2xl);
  }
  .qm--hover-card-data-item {
    display: flex;
    flex-direction: column;
    gap: var(--layout-gap-none);
    flex-shrink: 0;
  }
  .qm--hover-card-data-item:last-child {
    flex: 1;
    min-width: 0;
  }
  .qm--hover-card-data-subtitle {
    height: var(--layout-dimension-sm);
    color: var(--color-text-subdued);
    font-family: var(--layout-font-family-default);
    font-size: var(--layout-font-size-body-sm);
    font-weight: var(--layout-font-weight-body-regular);
    line-height: var(--layout-font-line-height-body-sm);
    letter-spacing: var(--layout-font-letter-spacing-body-sm);
  }
  .qm--hover-card-data-value {
    color: var(--color-text-default);
    font-family: var(--layout-font-family-default);
    font-size: var(--layout-font-size-heading-md);
    font-weight: var(--layout-font-weight-body-semibold);
    line-height: var(--layout-font-line-height-heading-sm);
    letter-spacing: var(--layout-font-letter-spacing-heading-lg);
  }
  .qm--hover-card-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* dist/components/Stepper/Stepper.css */
.qm-stepper {
  .MuiStepConnector-line {
    border-color: var(--color-border-default);
    border-top-width: 1px;
  }
  .MuiStepLabel-root {
    display: flex;
    align-items: center;
    &.clickable {
      cursor: pointer;
    }
  }
  .MuiStepLabel-iconContainer {
    padding-right: 0 !important;
    margin-right: 0 !important;
    flex-shrink: 0;
  }
  .MuiStepLabel-labelContainer {
    padding-left: 0 !important;
  }
  .MuiStepLabel-label {
    color: var(--color-text-subdued);
    font-weight: 400;
    margin-top: 0;
    margin-left: 8px;
    position: relative;
  }
  .MuiStepLabel-label.Mui-active {
    color: var(--color-text-default);
    font-weight: 500;
  }
  .MuiStepLabel-label.Mui-completed {
    color: var(--color-text-default);
    font-weight: 400;
  }
  .MuiStepLabel-label.Mui-disabled {
    color: var(--color-text-disabled);
  }
  .MuiStepLabel-alternativeLabel {
    flex-direction: column;
  }
  .MuiStepLabel-alternativeLabel .MuiStepLabel-label {
    margin-left: 0;
    margin-top: 8px;
    text-align: center;
  }
}
.qm-stepper-label-primary {
  font-weight: inherit;
  color: inherit;
  line-height: inherit;
}
.qm-stepper.timeline .qm-stepper-label-primary {
  flex: 0 1 auto;
}
.qm-stepper-label-secondary {
  position: absolute;
  top: 100%;
  left: 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-subdued);
  line-height: 1.2;
  margin-top: 2px;
  white-space: nowrap;
}
.qm-stepper .MuiStepLabel-alternativeLabel .qm-stepper-label-secondary {
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.qm-stepper.compact .qm-stepper-label-secondary {
  font-size: 11px;
  margin-top: 1px;
}
.qm-stepper-icon {
  width: var(--layout-dimension-lg);
  height: var(--layout-dimension-lg);
  border-radius: var(--layout-border-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-background-neutral-subtle-default);
  border: var(--layout-border-weight-xs) solid transparent;
  transition: all 0.2s ease-in-out;
}
.qm-stepper-icon.compact {
  width: var(--layout-dimension-sm);
  height: var(--layout-dimension-sm);
}
.qm-stepper-icon.active {
  background-color: var(--color-background-neutral-selected);
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%);
}
.qm-stepper-icon.completed {
  background-color: var(--color-background-neutral-subtle-default);
  border-color: var(--color-border-default);
}
.qm-stepper-icon.completed.active {
  background-color: var(--color-background-neutral-selected);
  border-color: transparent;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%);
}
.qm-stepper-icon.error {
  background-color: var(--color-background-neutral-subtle-disabled);
}
.qm-stepper-icon.primary {
  background-color: var(--color-background-action-default) !important;
  border-color: transparent !important;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%);
}
.qm-stepper-icon.primary .qm-stepper-icon-number,
.qm-stepper-icon.primary .qm-stepper-icon-check {
  color: var(--color-icon-action-inverted) !important;
}
.qm-stepper-icon-number {
  font-family: var(--layout-font-family-default);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-subdued);
  line-height: 1;
}
.qm-stepper-icon.compact .qm-stepper-icon-number {
  font-size: 10px;
}
.qm-stepper-icon.active .qm-stepper-icon-number {
  color: var(--color-text-default);
}
.qm-stepper-icon.completed .qm-stepper-icon-number {
  color: var(--color-text-default);
}
.qm-stepper-icon.error .qm-stepper-icon-number {
  color: var(--color-icon-disabled);
}
.qm-stepper-icon-check {
  width: 12px !important;
  height: 12px !important;
  color: var(--color-text-subdued);
}
.qm-stepper-icon.compact .qm-stepper-icon-check {
  width: 8px !important;
  height: 8px !important;
}
.qm-stepper-icon.active .qm-stepper-icon-check {
  color: var(--color-text-default);
}
.qm-stepper-icon.completed .qm-stepper-icon-check {
  color: var(--color-text-default);
}
.qm-stepper-icon.error .qm-stepper-icon-check {
  color: var(--color-icon-disabled);
}
.qm-stepper.compact .MuiStepLabel-label {
  margin-top: 0;
  font-size: 14px;
}
.qm-stepper .MuiStepConnector-vertical {
  margin-left: 12px;
  min-height: 24px;
}
.qm-stepper.compact .MuiStepConnector-vertical {
  margin-left: 8px;
  min-height: 20px;
}
.qm-stepper.timeline .MuiStepConnector-root {
  display: none;
}
.qm-stepper .MuiStep-root.Mui-disabled .qm-stepper-icon {
  background-color: var(--color-background-neutral-subtle-disabled);
}
.qm-stepper .MuiStep-root.Mui-disabled .qm-stepper-icon-number,
.qm-stepper .MuiStep-root.Mui-disabled .qm-stepper-icon-check {
  color: var(--color-icon-disabled);
}
.qm-stepper.timeline {
  --timeline-icon-size: 16px;
}
.qm-stepper.timeline .qm-stepper-step {
  min-height: 32px;
}
.qm-stepper.timeline .MuiStep-root {
  position: relative;
  min-height: 32px;
}
.qm-stepper.timeline .MuiStep-root::before {
  content: "";
  position: absolute;
  left: calc(var(--timeline-icon-size) / 2);
  top: calc(var(--timeline-icon-size) + var(--layout-padding-md));
  bottom: 0;
  width: var(--layout-border-weight-xs);
  background-color: var(--color-border-default);
}
.qm-stepper.timeline .MuiStep-root:last-child::before {
  display: none;
}
.qm-stepper.timeline .MuiStepLabel-root {
  padding-top: 0;
  padding-bottom: 0;
  align-items: flex-start;
}
.qm-stepper.timeline .MuiStepLabel-root.toggleable {
  cursor: pointer;
}
.qm-stepper.timeline .MuiStepLabel-iconContainer {
  padding-top: var(--layout-padding-sm);
}
.qm-stepper.timeline .qm-stepper-icon {
  background-color: transparent;
  border: none;
  box-shadow: none;
  width: var(--timeline-icon-size);
  height: var(--timeline-icon-size);
  flex-shrink: 0;
}
.qm-stepper.timeline .qm-stepper-icon.status-done {
  .phosphor-icon {
    color: var(--color-icon-positive-default);
  }
}
.qm-stepper.timeline .qm-stepper-icon.status-inProgress {
  .phosphor-icon {
    color: var(--color-icon-action-default);
    animation: spin 1s linear infinite;
  }
}
.qm-stepper.timeline .qm-stepper-icon.status-notStarted {
  .phosphor-icon {
    color: var(--color-icon-disabled);
  }
}
.qm-stepper.timeline .qm-stepper-icon.status-error {
  .phosphor-icon {
    color: var(--color-icon-negative-default);
  }
}
.qm-stepper.timeline .MuiStepLabel-label {
  color: var(--color-text-default);
}
.qm-stepper-label-container {
  display: flex;
  align-items: center;
  gap: var(--layout-gap-sm);
  flex-wrap: nowrap;
  &:has(.qm-stepper-toggle-link) {
    justify-content: space-between;
  }
}
.qm-stepper.timeline .qm-stepper-label-container {
  align-items: flex-start;
}
.qm-stepper.timeline .qm-stepper-label-container-inline {
  align-items: center;
}
.qm-stepper-description-inline {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-subdued);
}
.qm-stepper-metadata-inline {
  flex-shrink: 0;
  color: var(--color-text-disabled);
  font-size: var(--layout-font-size-disclaimer-sm);
  line-height: var(--layout-font-line-height-disclaimer-sm);
  margin-left: var(--layout-gap-xs);
}
.qm-stepper-timeline-content {
  margin-left: calc(var(--timeline-icon-size) + var(--layout-padding-md));
  margin-top: var(--layout-gap-xs);
  display: flex;
  flex-direction: column;
  padding-bottom: var(--layout-padding-lg);
  &.expanded {
    gap: var(--layout-gap-md);
  }
}
.qm-stepper-description {
  color: var(--color-text-subdued);
}
.qm-stepper-metadata {
  color: var(--color-text-subdued);
}
.qm-stepper-left-icon {
  color: var(--color-icon-default);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.qm-stepper.timeline .qm-stepper-left-icon {
  margin-top: var(--layout-padding-sm);
}
.qm-stepper-step-content {
  overflow: hidden;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
  max-height: 0;
  opacity: 0;
}
.qm-stepper-step-content.expanded {
  max-height: 2000px;
  opacity: 1;
  transition: max-height 0.5s ease-in, opacity 0.5s ease-in;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* dist/components/Skeleton/Skeleton.css */
.qm-skeleton {
  border-radius: var(--layout-border-radius-sm, 4px) !important;
  background: var(--color-background-neutral-selected, rgb(212 214 216)) !important;
}
.qm-skeleton.MuiSkeleton-pulse {
  animation: qm-skeleton-pulse 1.5s ease-in-out 0.5s infinite;
}
.qm-skeleton.MuiSkeleton-wave {
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--color-background-neutral-selected, rgb(212 214 216)),
      transparent) !important;
  animation: qm-skeleton-wave 1.6s linear 0.5s infinite;
}
.qm-skeleton.MuiSkeleton-text {
  border-radius: var(--layout-border-radius-sm, 4px) !important;
}
.qm-skeleton.MuiSkeleton-rectangular {
  border-radius: var(--layout-border-radius-sm, 4px) !important;
}
.qm-skeleton.MuiSkeleton-rounded {
  border-radius: var(--layout-border-radius-md, 8px) !important;
}
.qm-skeleton.MuiSkeleton-circular {
}
@keyframes qm-skeleton-pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
@keyframes qm-skeleton-wave {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* dist/components/InlineEdit/InlineEdit.css */
.qm--inline-edit.MuiInputBase-root {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  height: fit-content;
  width: fit-content;
  margin: 0;
  padding: var(--layout-padding-xs);
  border: var(--layout-border-weight-xs) solid transparent;
  border-radius: var(--layout-border-radius-xs);
  color: var(--color-text-default);
  cursor: text;
  &:not(.qm--inline-edit--editing) {
    &:hover {
      border-color: var(--color-border-default);
    }
  }
  &.qm--inline-edit--editing {
    border-color: var(--color-border-bold);
  }
  &.qm--inline-edit--error {
    border-color: var(--color-border-negative-subtle-selected);
  }
  .MuiInputBase-input {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--layout-border-radius-none);
    field-sizing: content;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    box-sizing: border-box;
    &[type=text] {
      color: var(--color-text-default);
    }
    &::placeholder {
      color: var(--color-text-subdued);
      opacity: 1;
    }
  }
  .MuiInputBase-input.text-heading-lg {
    font-family: var(--layout-font-family-default);
    font-size: var(--layout-font-size-heading-lg);
    font-weight: var(--layout-font-weight-heading-lg);
    line-height: var(--layout-font-line-height-heading-lg);
    letter-spacing: var(--layout-font-letter-spacing-heading-lg);
  }
  .MuiInputBase-input.text-heading-md {
    font-family: var(--layout-font-family-default);
    font-size: var(--layout-font-size-heading-md);
    font-weight: var(--layout-font-weight-heading-md);
    line-height: var(--layout-font-line-height-heading-md);
    letter-spacing: var(--layout-font-letter-spacing-heading-md);
  }
  .MuiInputBase-input.text-heading-sm {
    font-family: var(--layout-font-family-default);
    font-size: var(--layout-font-size-heading-sm);
    font-weight: var(--layout-font-weight-heading-sm);
    line-height: var(--layout-font-line-height-heading-sm);
    letter-spacing: var(--layout-font-letter-spacing-heading-sm);
  }
  .MuiInputBase-input.text-body-md {
    font-family: var(--layout-font-family-default);
    font-size: var(--layout-font-size-body-md);
    font-weight: var(--layout-font-weight-body-regular);
    line-height: var(--layout-font-line-height-body-md);
    letter-spacing: var(--layout-font-letter-spacing-body-md);
  }
  .MuiInputBase-input.text-body-md-semibold {
    font-family: var(--layout-font-family-default);
    font-size: var(--layout-font-size-body-md);
    font-weight: var(--layout-font-weight-body-semibold);
    line-height: var(--layout-font-line-height-body-md);
    letter-spacing: var(--layout-font-letter-spacing-body-md);
  }
  .MuiInputBase-input.text-body-sm {
    font-family: var(--layout-font-family-default);
    font-size: var(--layout-font-size-body-sm);
    font-weight: var(--layout-font-weight-body-regular);
    line-height: var(--layout-font-line-height-body-sm);
    letter-spacing: var(--layout-font-letter-spacing-body-sm);
  }
  .MuiInputBase-input.text-body-sm-semibold {
    font-family: var(--layout-font-family-default);
    font-size: var(--layout-font-size-body-sm);
    font-weight: var(--layout-font-weight-body-semibold);
    line-height: var(--layout-font-line-height-body-sm);
    letter-spacing: var(--layout-font-letter-spacing-body-sm);
  }
  min-width: 0;
  max-width: 100%;
  &:disabled,
  &.Mui-disabled {
    cursor: not-allowed;
    opacity: 0.5;
    &:hover {
      opacity: 0.5;
    }
  }
}
.qm--inline-edit-container {
  display: inline-flex;
  flex-direction: column;
  width: fit-content;
  max-width: 100%;
}
.qm--inline-edit-helper-text {
  padding: var(--layout-padding-xs);
  font-family: var(--layout-font-family-default);
  font-size: var(--layout-font-size-body-sm);
  line-height: var(--layout-font-line-height-body-sm);
  color: var(--color-text-subdued);
}
.qm--inline-edit-helper-text--error {
  color: var(--color-text-negative-default);
}

/* dist/components/Switch/Switch.css */
.qm--switch-container {
  display: flex;
  align-items: center;
  gap: var(--layout-gap-form-md);
  font-family: var(--layout-font-family-default);
  font-size: var(--layout-font-size-form-default);
  color: var(--color-text-default);
  &:has(.qm--switch.is-compact) {
    font-size: var(--layout-font-size-form-compact);
  }
  .qm--switch {
    .MuiTouchRipple-root {
      display: none;
    }
    --thumb-margin: 2px;
    &:not(.is-compact) {
      --width: 34px;
      --height: var(--layout-dimension-sm);
    }
    &.is-compact {
      --width: 26px;
      --height: var(--layout-dimension-xs);
    }
    &.MuiSwitch-root {
      --thumb-size: calc(var(--height) - 2 * var(--thumb-margin));
      width: var(--width);
      height: var(--height);
      padding: 0;
      .MuiSwitch-switchBase {
        margin: var(--thumb-margin);
        padding: 0;
        &.Mui-checked {
          transform: translateX(calc(var(--width) - 2 * var(--thumb-margin) - var(--thumb-size)));
          .MuiSwitch-thumb {
            background-color: var(--color-icon-action-inverted);
          }
          + .MuiSwitch-track {
            background-color: var(--color-background-action-default);
          }
        }
        .MuiSwitch-thumb {
          width: var(--thumb-size);
          height: var(--thumb-size);
          background-color: var(--color-icon-neutral-default);
          box-shadow: none;
        }
      }
      .MuiSwitch-track {
        opacity: 1;
        background-color: var(--color-background-neutral-default);
        border-radius: calc(var(--height) / 2);
      }
    }
    &:hover {
      .MuiSwitch-switchBase.Mui-checked {
        + .MuiSwitch-track {
          background-color: var(--color-background-action-hover);
        }
      }
      .MuiSwitch-track {
        background-color: var(--color-background-neutral-hover);
      }
    }
    .MuiSwitch-switchBase.Mui-disabled {
      .MuiSwitch-thumb {
        background-color: var(--color-icon-neutral-disabled);
      }
      &.Mui-checked .MuiSwitch-thumb {
        background-color: var(--color-icon-action-inverted);
      }
      + .MuiSwitch-track {
        cursor: not-allowed;
        background-color: var(--color-background-action-disabled) !important;
      }
    }
  }
}

/* dist/components/Select/Select.css */
.qm--select-container {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap-form-md);
  font-family: var(--layout-font-family-default);
  color: var(--color-text-subdued);
  .qm--select-label {
    line-height: var(--layout-font-line-height-body-sm);
    font-size: var(--layout-font-size-body-sm);
    font-weight: var(--layout-font-weight-body-semibold);
  }
  .qm--select {
    height: var(--layout-dimension-form-content-outer-default);
    padding: var(--layout-padding-form-default) var(--layout-padding-lg);
    gap: var(--layout-gap-form-md);
    background: var(--color-background-elevated);
    font-family: inherit;
    color: var(--color-text-default);
    .MuiSelect-select {
      color: inherit;
      .qm--select-placeholder {
        color: var(--color-text-subdued);
      }
    }
    .MuiSelect-select.MuiSelect-outlined.MuiInputBase-input {
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 0 calc(var(--layout-dimension-icon-sm) + var(--layout-gap-form-md)) 0 0;
      font-size: var(--layout-font-size-form-default);
    }
    &.qm--select--compact {
      height: var(--layout-dimension-form-content-outer-compact);
      padding: var(--layout-padding-md);
      gap: var(--layout-gap-form-sm);
      .MuiSelect-select.MuiSelect-outlined.MuiInputBase-input {
        padding: 0 calc(var(--layout-dimension-icon-xs) + var(--layout-gap-form-sm)) 0 0;
        font-size: var(--layout-font-size-form-compact);
      }
      .MuiSelect-icon {
        width: var(--layout-dimension-icon-xs);
        height: var(--layout-dimension-icon-xs);
        right: var(--layout-padding-md);
        color: inherit;
      }
    }
    &.Mui-disabled {
      .MuiOutlinedInput-notchedOutline {
        border-color: var(--color-border-disabled);
      }
      .MuiSelect-select {
        color: var(--color-text-disabled);
        -webkit-text-fill-color: var(--color-text-disabled);
      }
    }
    .MuiOutlinedInput-notchedOutline {
      border: var(--layout-border-weight-xs) solid var(--color-border-default);
    }
    &:hover:not(.Mui-disabled) .MuiOutlinedInput-notchedOutline,
    &.Mui-focused .MuiOutlinedInput-notchedOutline {
      border-width: var(--layout-border-weight-xs);
      border-color: var(--color-border-bold);
    }
    .MuiSelect-icon {
      width: var(--layout-dimension-icon-sm);
      height: var(--layout-dimension-icon-sm);
      right: var(--layout-padding-lg);
      top: unset;
      color: inherit;
    }
  }
  &.has-error {
    .qm--select-helper-text {
      color: var(--color-text-negative-default);
    }
    .qm--select {
      &,
      &:hover,
      &.Mui-focused {
        .MuiOutlinedInput-notchedOutline {
          border-color: var(--color-border-negative-subtle-selected);
        }
      }
    }
  }
  .qm--select-helper-text {
    font-size: var(--layout-font-size-form-compact);
    line-height: var(--layout-font-line-height-form-compact);
  }
}
.qm--select-menu {
  font-family: var(--layout-font-family-default);
  .MuiTouchRipple-root {
    display: none;
  }
  .MuiMenu-paper {
    margin-top: var(--layout-padding-sm);
    border-radius: var(--layout-border-radius-md);
    border: var(--layout-border-weight-xs) solid var(--color-border-default);
    background: var(--color-background-elevated);
    box-shadow: 0 2px 4px -2px var(--color-effects-shadow-md), 0 4px 6px -1px var(--color-effects-shadow-md);
    .MuiList-root {
      padding: 0;
    }
    .MuiMenuItem-root {
      padding: var(--layout-padding-md) var(--layout-padding-lg);
      font-size: var(--layout-font-size-body-md);
      color: var(--color-text-default);
      transition: background-color 0.2s;
      &:hover {
        background-color: var(--color-background-action-subtle-hover);
      }
      &.Mui-selected {
        background-color: var(--color-background-action-subtle-selected);
      }
      &.Mui-disabled {
        color: var(--color-text-disabled);
      }
    }
  }
  &.qm--select-menu--compact {
    .MuiMenu-paper {
      .MuiMenuItem-root {
        padding: var(--layout-padding-md);
        font-size: var(--layout-font-size-body-sm);
      }
    }
  }
}
.qm--select-container .qm--select .MuiSelect-select .qm--selected-item,
.qm--select-menu .MuiMenu-paper .MuiMenuItem-root.qm--menu-item {
  display: flex;
  align-items: center;
  gap: var(--layout-gap-form-md);
  .phosphor-icon {
    width: var(--layout-dimension-icon-sm);
    height: var(--layout-dimension-icon-sm);
    color: inherit;
  }
}

/* dist/components/MultiSelect/MultiSelect.css */
.qm--select-menu--multiple .MuiMenu-paper .MuiMenuItem-root .qm--menu-item-checkbox {
  padding: 0;
  margin-right: var(--layout-gap-form-sm);
  .MuiSvgIcon-root {
    width: var(--layout-dimension-icon-sm);
    height: var(--layout-dimension-icon-sm);
  }
}

/* dist/components/Slider/Slider.css */
.qm--slider-container {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap-sm);
  width: 100%;
  min-width: 140px;
  .qm--slider-label {
    color: var(--color-text-subdued);
    padding-bottom: var(--layout-padding-lg);
  }
  .qm--slider-range-label {
    color: var(--color-text-subdued);
  }
  .qm--slider-range-labels {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .qm--slider {
    padding: var(--layout-padding-none);
    .MuiSlider-thumb {
      width: var(--layout-dimension-sm);
      height: var(--layout-dimension-sm);
      background-color: var(--color-background-action-default);
      box-shadow: var(--shadow-sm);
      &::before {
        box-shadow: none;
      }
      &:hover,
      &.Mui-focusVisible {
        box-shadow: var(--shadow-sm);
      }
      &.Mui-active {
        box-shadow: var(--shadow-md);
      }
    }
    .MuiSlider-track,
    .MuiSlider-rail {
      height: 4px;
      border-radius: var(--layout-border-radius-full);
    }
    .MuiSlider-track {
      background-color: var(--color-background-action-selected);
      border: none;
      box-shadow: var(--shadow-xs);
    }
    .MuiSlider-rail {
      background-color: var(--color-background-neutral-default);
      opacity: 1;
    }
    .MuiSlider-mark {
      background-color: var(--color-background-inverted);
      width: 4px;
      height: 4px;
      border-radius: var(--layout-border-radius-full);
      top: 50%;
      transform: translateY(-50%);
    }
    .MuiSlider-markActive {
      background-color: var(--color-background-recessed);
    }
    .MuiSlider-markLabel {
      color: var(--color-text-subdued);
      font-family: var(--layout-font-family-default);
      font-size: var(--layout-font-size-body-sm);
      top: var(--layout-gap-lg);
    }
    &.Mui-disabled {
      .MuiSlider-thumb,
      .MuiSlider-track {
        background-color: var(--color-background-action-disabled);
      }
    }
  }
  &.is-compact {
    gap: var(--layout-gap-xs);
    .qm--slider-label {
      padding-bottom: var(--layout-padding-md);
    }
  }
  &.is-compact .qm--slider {
    .MuiSlider-thumb {
      width: var(--layout-dimension-xs);
      height: var(--layout-dimension-xs);
    }
    .MuiSlider-track,
    .MuiSlider-rail {
      height: 2px;
    }
    .MuiSlider-markLabel {
      top: var(--layout-gap-md);
    }
  }
  &.size-sm {
    width: 245px;
  }
  &.size-md {
    width: 490px;
  }
  &.size-lg {
    width: 980px;
  }
  &.hide-labels {
    .qm--slider-label,
    .qm--slider-range-labels {
      display: none;
    }
  }
}

/* dist/components/ColorPicker/ColorPicker.css */
.qm--color-picker {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap-lg);
  align-items: flex-start;
  justify-content: center;
  width: calc(300px + 2 * var(--layout-border-weight-xs));
  padding: var(--layout-padding-lg);
  background-color: var(--color-background-elevated);
  border: var(--layout-border-weight-xs) solid var(--color-border-default);
  border-radius: var(--layout-border-radius-sm);
  box-shadow: var(--shadow-md);
}
.qm--color-picker-header {
  display: flex;
  align-items: center;
  width: 100%;
}
.qm--color-picker-header-title {
  flex: 1 0 0;
  color: var(--color-text-default);
  font-weight: var(--layout-font-weight-form-semibold);
  font-size: var(--layout-font-size-form-default);
  font-family: var(--layout-font-family-default);
  line-height: var(--layout-font-line-height-form-default);
  letter-spacing: var(--layout-font-letter-spacing-form-default);
}
.qm--color-picker-header-close {
  color: var(--color-icon-default);
  &:hover {
    color: var(--color-icon-neutral-hover);
  }
}
.qm--color-picker-content {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap-lg);
  align-items: center;
  width: 100%;
  & .react-colorful {
    gap: var(--layout-gap-lg);
    width: 100% !important;
    height: auto !important;
  }
  & .react-colorful__saturation {
    height: 220px;
    border-radius: var(--layout-border-radius-md);
    border-bottom: none;
  }
  & .react-colorful__hue {
    height: var(--layout-dimension-xs);
    border-radius: var(--layout-border-radius-sm);
  }
  & .react-colorful__hue .react-colorful__interactive {
    border-radius: 0;
  }
  & .react-colorful__pointer {
    width: var(--layout-dimension-sm);
    height: var(--layout-dimension-sm);
    border: var(--layout-border-weight-sm) solid var(--color-icon-inverted);
    box-shadow: 0 0 2px 0 rgb(0 0 0 / 50%);
  }
}
.qm--color-picker-hex-input {
  display: flex;
  gap: var(--layout-gap-form-sm);
  align-items: center;
  width: 100%;
  height: var(--layout-dimension-lg);
  padding: var(--layout-padding-md);
  background-color: var(--color-background-elevated);
  border: var(--layout-border-weight-xs) solid var(--color-border-default);
  border-radius: var(--layout-border-radius-sm);
  box-sizing: border-box;
  &:focus-within {
    border-color: var(--color-border-action-default);
  }
}
.qm--color-picker-hex-input-prefix {
  display: flex;
  align-items: center;
  color: var(--color-text-subdued);
}
.qm--color-picker-hex-input input {
  flex: 1 0 0;
  width: 100%;
  padding: 0;
  overflow: hidden;
  color: var(--color-text-default);
  font-weight: var(--layout-font-weight-form-regular);
  font-size: var(--layout-font-size-form-compact);
  font-family: var(--layout-font-family-default);
  line-height: var(--layout-font-line-height-form-compact);
  text-overflow: ellipsis;
  white-space: nowrap;
  background: none;
  border: none;
  outline: none;
}
.qm--color-picker-swatches {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap-md);
  align-items: flex-start;
  width: 100%;
}
.qm--color-picker-swatches-label {
  overflow: hidden;
  color: var(--color-text-subdued);
  font-weight: var(--layout-font-weight-form-semibold);
  font-size: var(--layout-font-size-form-compact);
  font-family: var(--layout-font-family-default);
  line-height: var(--layout-font-line-height-body-sm);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.qm--color-picker-swatches-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--layout-gap-sm);
  align-items: flex-start;
  width: 100%;
}
.qm--color-picker-swatch {
  width: var(--layout-dimension-lg);
  height: var(--layout-dimension-lg);
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--layout-border-radius-md);
  cursor: pointer;
  transition: transform 0.1s ease-out;
  &:hover > .qm--color-picker-swatch-color {
    box-shadow: 0 1px 2px -1px var(--color-effects-shadow-sm), 0 1px 3px 0 var(--color-effects-shadow-sm);
    transform: scale(1.04);
  }
  &.is-selected > .qm--color-picker-swatch-color {
    outline: var(--layout-border-weight-sm) solid var(--color-border-inverted-subtlest);
    outline-offset: var(--layout-border-weight-sm);
    box-shadow: 0 1px 2px -1px var(--color-effects-shadow-sm), 0 1px 3px 0 var(--color-effects-shadow-sm);
  }
}
.qm--color-picker-swatch-color {
  width: 100%;
  height: 100%;
  border: var(--layout-border-weight-xs) solid var(--color-border-neutral-default);
  border-radius: var(--layout-border-radius-md);
}
.qm--color-picker-footer {
  display: flex;
  gap: var(--layout-gap-form-md);
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

/* dist/components/Checkbox/Checkbox.css */
.qm--checkbox-container {
  display: inline-flex;
  align-items: center;
  gap: var(--layout-gap-form-md);
  &.is-disabled .MuiCheckbox-root.qm--checkbox {
    background: var(--color-background-action-disabled);
    border: var(--layout-border-weight-xs) solid var(--color-border-action-disabled);
    &.Mui-checked,
    &.MuiCheckbox-indeterminate {
      background: var(--color-background-action-disabled);
      border: var(--layout-border-weight-xs) solid var(--color-border-action-disabled);
    }
  }
  &:not(.is-icon) {
    padding: var(--layout-padding-none);
  }
  .MuiCheckbox-root.qm--checkbox {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--layout-gap-form-md);
    border-radius: var(--layout-border-radius-sm);
    border: var(--layout-border-weight-xs) solid var(--color-border-bold);
    background: var(--color-background-elevated);
    &:not(.is-icon) {
      padding: var(--layout-padding-none);
      border-radius: var(--layout-border-radius-xs);
    }
    &.Mui-checked,
    &.MuiCheckbox-indeterminate {
      background: var(--color-background-action-default);
      border: var(--layout-border-weight-xs) solid var(--color-background-action-default);
      svg {
        color: var(--color-icon-inverted);
      }
    }
    &:hover,
    &.Mui-focusVisible {
      border: var(--layout-border-weight-xs) solid var(--color-border-action-subtle-hover);
      background: var(--color-background-action-subtle-hover);
      &.Mui-checked,
      &.MuiCheckbox-indeterminate {
        background: var(--color-background-action-hover);
        border: var(--layout-border-weight-xs) solid var(--color-background-action-hover);
      }
    }
  }
  .qm--checkbox-label {
    color: var(--color-text-default);
    font-family: var(--layout-font-family-default);
    font-size: var(--layout-font-size-form-default);
    font-style: normal;
    font-weight: var(--layout-font-weight-form-default);
    line-height: 20px;
    letter-spacing: var(--layout-font-letter-spacing-form-default);
    margin-bottom: 0;
  }
  &.is-compact .qm--checkbox-label {
    font-size: var(--layout-font-size-form-compact);
  }
  &.is-disabled .qm--checkbox-label {
    color: var(--color-text-disabled);
  }
}

/* dist/components/ToggleButtonGroup/ToggleButtonGroup.css */
.qm--toggle-button.MuiToggleButtonGroup-root {
  padding: var(--layout-padding-sm);
  border-radius: var(--layout-border-radius-md);
  background: var(--color-background-neutral-subtlest-default);
  gap: var(--layout-gap-xs);
  &:not(.qm--toggle-button-is-compact) {
    button {
      height: var(--layout-dimension-form-content-outer-default);
      padding: var(--layout-padding-form-default);
      font-size: var(--layout-font-size-form-default);
      line-height: var(--layout-font-line-height-form-default);
    }
  }
  &.qm--toggle-button-is-compact {
    button {
      height: var(--layout-dimension-form-content-outer-compact);
      padding: var(--layout-padding-sm) var(--layout-padding-md);
      font-size: var(--layout-font-size-form-compact);
      line-height: var(--layout-font-line-height-form-compact);
    }
  }
  &.qm--toggle-button-intent-action {
    button:not(.Mui-disabled) {
      &:hover {
        background: var(--color-background-action-subtle-hover);
      }
      &.Mui-selected {
        background: var(--color-background-action-subtle-selected);
        color: var(--color-text-action-selected);
      }
    }
  }
  &.qm--toggle-button-intent-neutral {
    button:not(.Mui-disabled) {
      &:hover {
        background: var(--color-background-neutral-subtle-hover);
      }
      &.Mui-selected {
        background: var(--color-background-neutral-subtle-selected);
        color: var(--color-text-default);
      }
    }
  }
  button {
    height: var(--layout-dimension-form-content-outer-default);
    padding: var(--layout-padding-form-default);
    border: none;
    border-radius: var(--layout-border-radius-form-default);
    text-transform: none;
    font-family: var(--layout-font-family-default);
    font-weight: var(--layout-font-weight-form-semibold);
    transition: background 0.2s, color 0.2s;
    color: var(--color-text-subdued);
    &.Mui-disabled {
      color: var(--color-text-action-disabled);
      &.Mui-selected {
        color: var(--color-text-action-inverted);
        background: var(--color-background-action-disabled);
      }
    }
    &.MuiToggleButtonGroup-firstButton,
    &.MuiToggleButtonGroup-middleButton,
    &.MuiToggleButtonGroup-lastButton {
      border-radius: var(--layout-border-radius-form-default);
    }
    &:hover {
      background: unset;
    }
    &.Mui-selected {
      box-shadow: 0 1px 2px -1px var(--color-effects-shadow-sm), 0 1px 3px 0 var(--color-effects-shadow-sm);
    }
    .MuiTouchRipple-root {
      display: none;
    }
    & svg {
      color: inherit;
    }
  }
}

/* dist/icons/icon.css */
.phosphor-icon {
  color: var(--color-icon-default);
}
.phosphor-icon-spinning {
  animation: phosphor-icon-spin 1s linear infinite;
}
@keyframes phosphor-icon-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .phosphor-icon-spinning {
    animation: none;
  }
}

/* dist/components/Table/components/SortIcon.css */
.qm--table-sort-icon {
  display: flex;
  flex-direction: column;
}
.qm--table-sort-icon-up {
  margin-bottom: -2px;
}
.qm--table-sort-icon-down {
  margin-top: -2px;
}

/* dist/components/Table/Table.css */
.qm--table {
  display: flex;
  padding: var(--layout-padding-none);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--layout-gap-md);
  &.is-resizable {
    .MuiTable-root {
      table-layout: fixed;
    }
  }
  .qm--table-head {
    .qm--table-cell {
      position: relative;
      font-weight: var(--layout-font-weight-body-semibold);
    }
    .qm--table-row:last-child {
      .qm--table-cell {
        border-bottom: var(--layout-border-weight-xs) solid var(--color-border-default);
      }
    }
  }
  .qm--table-row {
    &.is-selected {
      background: var(--color-background-action-subtle-selected);
      .qm--table-cell.is-pinned,
      .qm--table-cell.is-pinned-right {
        background: var(--color-background-action-subtle-selected);
      }
    }
    &.is-clickable {
      cursor: pointer;
    }
    &:hover {
      .qm--table-cell.is-pinned,
      .qm--table-cell.is-pinned-right {
        background: var(--color-background-action-subtle-hover);
      }
    }
    &:last-child {
      .qm--table-cell {
        border-bottom: none;
      }
    }
    &.depth-medium .qm--table-cell:first-child {
      border-left: 2px solid var(--color-border-subdued);
    }
    &.depth-deep .qm--table-cell:first-child {
      border-left: 2px solid var(--color-border-default);
    }
  }
  .qm--table-cell {
    padding: var(--layout-padding-lg);
    align-items: center;
    gap: var(--layout-gap-md);
    flex-shrink: 0;
    border-radius: var(--layout-border-radius-none);
    border-bottom: var(--layout-border-weight-xs) solid var(--color-border-default);
    overflow: hidden;
    color: var(--color-text-default);
    text-overflow: ellipsis;
    font-family: var(--layout-font-family-default);
    font-size: var(--layout-font-size-body-md);
    font-style: normal;
    font-weight: var(--layout-font-weight-body-regular);
    line-height: var(--layout-font-line-height-body-md);
    letter-spacing: var(--layout-font-letter-spacing-body-md);
    &.is-compact {
      padding: var(--layout-padding-md);
    }
    &.qm--table-cell--with-expand-icon {
      padding-left: var(--layout-padding-none);
    }
    .qm--table-expand-button {
      margin-right: var(--layout-padding-md);
    }
    .qm--table-cell-depth-0 {
      padding-left: var(--layout-padding-none);
    }
    .qm--table-cell-depth-1 {
      padding-left: var(--layout-padding-7xl);
    }
    .qm--table-cell-depth-2 {
      padding-left: calc(var(--layout-padding-9xl) + var(--layout-padding-sm));
    }
    &.qm--table-cell--with-expand-icon .qm--table-cell-depth-1 {
      padding-left: var(--layout-padding-4xl);
    }
    &.is-pinned,
    &.is-pinned-right {
      position: sticky;
      z-index: 5;
      background: var(--color-background-elevated);
      white-space: nowrap;
    }
    &.is-pinned {
      left: 0;
    }
    &.is-pinned-right {
      right: 0;
    }
  }
  .qm--table-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    cursor: col-resize;
    user-select: none;
    touch-action: none;
    opacity: 0;
    background: var(--color-border-action-default);
    &.is-resizing {
      opacity: 1;
    }
  }
  &.is-column-resizing {
    cursor: col-resize;
    * {
      cursor: col-resize;
    }
  }
  .qm--table-cell.is-resizing-column {
    background: var(--color-background-neutral-subtlest-default);
  }
  .qm--table-head .qm--table-cell:hover .qm--table-resize-handle {
    opacity: 1;
  }
  .qm--table-head .qm--table-cell.is-pinned {
    z-index: 6;
  }
  .qm--table-head .qm--table-cell.is-pinned-right {
    z-index: 6;
  }
  .has-sticky-header .qm--table-head {
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .has-sticky-header .qm--table-head .qm--table-cell {
    background: var(--color-background-elevated);
  }
  .qm--table-cell--header-group {
    z-index: 1;
  }
  .qm--table-cell.is-compact:has(.qm--table-sort-label) {
    padding: 0;
    .qm--table-sort-label {
      padding: var(--layout-padding-md);
    }
  }
  .qm--table-sort-label {
    width: 100%;
    height: 100%;
    cursor: pointer;
    svg {
      transition: opacity ease-in-out 0.1s;
      opacity: 0;
      margin-left: var(--layout-gap-md);
    }
    &:hover {
      color: inherit;
      background: var(--color-background-neutral-subtlest-default);
      svg {
        opacity: 1;
      }
    }
    &.Mui-active {
      svg {
        opacity: 1;
      }
    }
  }
  .qm--table-head .qm--table-row:first-child .qm--table-cell {
    z-index: 1;
  }
  &.qm--table--headless .qm--table-content {
    border: none;
    padding: var(--layout-padding-none);
  }
  .qm--table-cell-content {
    display: flex;
    align-items: center;
    gap: var(--layout-gap-md);
    justify-content: space-between;
  }
  .qm--table-cell--header-group .qm--table-cell-content {
    justify-content: center;
    text-align: center;
  }
  .qm--table-title {
    display: flex;
    padding-left: var(--layout-padding-lg);
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    overflow: hidden;
    color: var(--color-text-default);
    text-overflow: ellipsis;
    font-family: var(--layout-font-family-default);
    font-size: var(--layout-font-size-heading-sm);
    font-style: normal;
    font-weight: var(--layout-font-weight-form-semibold);
    line-height: var(--layout-font-line-height-heading-sm);
    letter-spacing: var(--layout-font-letter-spacing-heading-sm);
  }
  .qm--table-toolbar {
    display: flex;
    padding: var(--layout-padding-none);
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  .qm--table-toolbar-actions {
    display: flex;
    gap: var(--layout-gap-md);
    align-items: center;
  }
  .qm--table-content {
    display: flex;
    padding: var(--layout-padding-lg);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--layout-gap-md);
    align-self: stretch;
    border-radius: var(--layout-border-radius-container-default);
    border: var(--layout-border-weight-xs) solid var(--color-border-default);
    background: var(--color-background-elevated);
  }
  .qm--table-scroll-wrapper {
    width: 100%;
    overflow: auto visible;
  }
  .qm--table-filter-dropdown {
    display: flex;
    gap: var(--layout-gap-md);
    align-items: center;
  }
  .qm--table-filter-dropdown-label {
    color: var(--color-text-default);
    font-family: var(--layout-font-family-default);
    font-size: var(--layout-font-size-form-default);
    font-style: normal;
    font-weight: var(--layout-font-weight-form-default-regular);
    line-height: 20px;
    letter-spacing: var(--layout-font-letter-spacing-form-default);
  }
}

/* dist/components/Pagination/Pagination.css */
.qm--pagination {
  display: flex;
  align-items: center;
  gap: var(--layout-gap-sm);
}
.qm--pagination .MuiPaginationItem-root {
  min-width: var(--layout-dimension-lg);
  height: var(--layout-dimension-lg);
  margin: 0;
  padding: var(--layout-padding-sm);
  border-radius: var(--layout-border-radius-full);
  background: transparent;
  color: var(--color-text-subdued);
  font-family: var(--layout-font-family-default);
  font-size: var(--layout-font-size-body-md);
  font-weight: var(--layout-font-weight-body-regular);
  line-height: var(--layout-font-line-height-body-md);
  letter-spacing: var(--layout-font-letter-spacing-body-md);
}
.qm--pagination .MuiPaginationItem-root:hover {
  background-color: var(--color-background-neutral-subtlest-hover);
}
.qm--pagination .MuiPaginationItem-root:active {
  background-color: var(--color-background-neutral-subtlest-selected);
}
.qm--pagination .MuiPaginationItem-root.Mui-selected {
  background-color: var(--color-background-neutral-subtlest-selected);
  box-shadow: 0 1px 3px 0 var(--color-effects-shadow-xs);
  color: var(--color-text-default);
  font-weight: var(--layout-font-weight-body-semibold);
}
.qm--pagination .MuiPaginationItem-root.Mui-selected:hover {
  background-color: var(--color-background-neutral-subtlest-selected);
}
.qm--pagination .MuiPaginationItem-root.Mui-selected:active {
  background-color: var(--color-background-neutral-subtlest-selected);
}
.qm--pagination .MuiPaginationItem-root.Mui-disabled {
  color: var(--color-text-disabled);
  opacity: 1;
}
.qm--pagination .MuiPaginationItem-previousNext {
  color: var(--color-icon-default);
}
.qm--pagination .MuiPaginationItem-previousNext:hover {
  background-color: var(--color-background-neutral-subtlest-hover);
  color: var(--color-icon-default);
}
.qm--pagination .MuiPaginationItem-previousNext.Mui-disabled {
  color: var(--color-icon-action-disabled);
  background-color: transparent;
}
.qm--pagination .MuiPaginationItem-ellipsis {
  color: var(--color-text-subdued);
  font-size: var(--layout-font-size-body-sm);
  font-weight: var(--layout-font-weight-body-semibold);
  line-height: var(--layout-font-line-height-body-sm);
  letter-spacing: var(--layout-font-letter-spacing-body-sm);
}
.qm--pagination.qm--pagination--compact {
  gap: var(--layout-gap-xs);
}
.qm--pagination.qm--pagination--compact .MuiPaginationItem-root {
  min-width: var(--layout-dimension-sm);
  height: var(--layout-dimension-sm);
  font-size: var(--layout-font-size-body-xs);
  line-height: var(--layout-font-line-height-disclaimer-sm);
}
.qm--pagination.qm--pagination--compact .MuiPaginationItem-icon {
  width: var(--layout-dimension-icon-xs);
  height: var(--layout-dimension-icon-xs);
}
.qm--pagination.qm--pagination--compact .MuiPaginationItem-ellipsis {
  font-size: var(--layout-font-size-disclaimer-sm);
  font-weight: var(--layout-font-weight-body-regular);
  line-height: var(--layout-font-line-height-disclaimer-sm);
  letter-spacing: var(--layout-font-letter-spacing-disclaimer-sm);
}

/* dist/components/Markdown/Markdown.css */
.qm--markdown {
  min-width: 0;
  max-width: 100%;
}
.qm--markdown h1 {
  font-size: var(--layout-font-size-prose-h1);
  font-weight: var(--layout-font-weight-prose-h1);
  line-height: var(--layout-font-line-height-prose-h1);
  letter-spacing: var(--layout-font-letter-spacing-prose-h1);
  margin: 0 0 var(--layout-font-paragraph-spacing-prose-h1) 0;
}
.qm--markdown h2 {
  font-size: var(--layout-font-size-prose-h2);
  font-weight: var(--layout-font-weight-prose-h2);
  line-height: var(--layout-font-line-height-prose-h2);
  letter-spacing: var(--layout-font-letter-spacing-prose-h2);
  margin: 0 0 var(--layout-font-paragraph-spacing-prose-h2) 0;
}
.qm--markdown h3 {
  font-size: var(--layout-font-size-prose-h3);
  font-weight: var(--layout-font-weight-prose-h3);
  line-height: var(--layout-font-line-height-prose-h3);
  letter-spacing: var(--layout-font-letter-spacing-prose-h3);
  margin: 0 0 var(--layout-font-paragraph-spacing-prose-h3) 0;
}
.qm--markdown h4 {
  font-size: var(--layout-font-size-prose-h4);
  font-weight: var(--layout-font-weight-prose-h4);
  line-height: var(--layout-font-line-height-prose-h4);
  letter-spacing: var(--layout-font-letter-spacing-prose-h4);
  margin: 0 0 var(--layout-font-paragraph-spacing-prose-h4) 0;
}
.qm--markdown h5 {
  font-size: var(--layout-font-size-prose-h5);
  font-weight: var(--layout-font-weight-prose-h5);
  line-height: var(--layout-font-line-height-prose-h5);
  letter-spacing: var(--layout-font-letter-spacing-prose-h5);
  margin: 0 0 var(--layout-font-paragraph-spacing-prose-h5) 0;
}
.qm--markdown h6 {
  font-size: var(--layout-font-size-prose-h6);
  font-weight: var(--layout-font-weight-prose-h6);
  line-height: var(--layout-font-line-height-prose-h6);
  letter-spacing: var(--layout-font-letter-spacing-prose-h6);
  margin: 0 0 var(--layout-font-paragraph-spacing-prose-h6) 0;
}
.qm--markdown p {
  font-size: var(--layout-font-size-prose-body);
  font-weight: var(--layout-font-weight-prose-body);
  line-height: var(--layout-font-line-height-prose-body);
  letter-spacing: var(--layout-font-letter-spacing-prose-body);
  margin: 0 0 var(--layout-font-paragraph-spacing-prose-body) 0;
}
.qm--markdown code {
  font-family: var(--layout-font-family-mono, monospace);
  font-size: var(--layout-font-size-prose-code-inline);
  font-weight: var(--layout-font-weight-prose-code-inline);
  line-height: var(--layout-font-line-height-prose-code-inline);
  letter-spacing: var(--layout-font-letter-spacing-prose-code-inline);
  margin: 0 0 var(--layout-font-paragraph-spacing-prose-code-inline) 0;
  padding: var(--layout-padding-sm);
  border-radius: var(--layout-border-radius-sm);
  background: var(--color-background-neutral-subtle-default);
}
.qm--markdown pre {
  font-family: var(--layout-font-family-mono, monospace);
  font-size: var(--layout-font-size-prose-code-block);
  font-weight: var(--layout-font-weight-prose-code-block);
  line-height: var(--layout-font-line-height-prose-code-block);
  letter-spacing: var(--layout-font-letter-spacing-prose-code-block);
  margin: 0 0 var(--layout-font-paragraph-spacing-prose-code-block) 0;
  padding: var(--layout-padding-md) var(--layout-padding-xl);
  border-radius: var(--layout-border-radius-sm);
  background: var(--color-background-neutral-subtle-default);
  overflow: auto;
}
.qm--markdown-code-block-wrapper {
  position: relative;
  width: max-content;
  max-width: 100%;
}
.qm--markdown-code-block-copy {
  position: absolute;
  top: var(--layout-padding-sm);
  right: var(--layout-padding-sm);
  opacity: 0;
  transition: opacity 150ms ease;
  pointer-events: none;
}
.qm--markdown-code-block-wrapper:hover .qm--markdown-code-block-copy,
.qm--markdown-code-block-wrapper:focus-within .qm--markdown-code-block-copy {
  opacity: 1;
  pointer-events: auto;
}
.qm--markdown pre > code {
  font: inherit;
  letter-spacing: inherit;
  padding: 0;
  background: none;
  border-radius: 0;
}
.qm--markdown strong {
  font-weight: var(--layout-font-weight-prose-semibold);
}
.qm--markdown del {
  color: var(--color-text-subdued);
}
.qm--markdown ul,
.qm--markdown ol {
  padding-inline-start: var(--layout-core-size-6);
  margin: 0 0 var(--layout-font-paragraph-spacing-prose-body) 0;
}
.qm--markdown li {
  font-size: var(--layout-font-size-prose-body);
  font-weight: var(--layout-font-weight-prose-body);
  line-height: var(--layout-font-line-height-prose-body);
  letter-spacing: var(--layout-font-letter-spacing-prose-body);
  margin: 0 0 var(--layout-font-paragraph-spacing-prose-body) 0;
}
.qm--markdown ol ol {
  list-style-type: lower-alpha;
}
.qm--markdown ol ol ol {
  list-style-type: lower-roman;
}
.qm--markdown ul.contains-task-list {
  padding-inline-start: 0;
}
.qm--markdown li.task-list-item {
  list-style-type: none;
}
.qm--markdown hr {
  border: 0;
  border-top: var(--layout-border-weight-xs) solid var(--color-border-default);
  margin: var(--layout-core-size-6) 0;
}
.qm--markdown a,
.qm--markdown a:visited {
  color: var(--color-text-hyperlink-default);
  text-decoration: none;
}
.qm--markdown a:hover {
  color: var(--color-text-hyperlink-hover);
}
.qm--markdown a:focus-visible,
.qm--markdown a:active {
  color: var(--color-text-hyperlink-selected);
}
.qm--markdown blockquote {
  margin: 0 0 var(--layout-font-paragraph-spacing-prose-body) 0;
  padding-inline-start: var(--layout-padding-md);
  border-inline-start: var(--layout-border-weight-sm) solid var(--color-border-bold);
  color: var(--color-text-subdued);
  font-style: italic;
}
.qm--markdown img {
  display: block;
  max-width: 100%;
  max-height: 40vh;
  margin: 0 0 var(--layout-font-paragraph-spacing-prose-body) 0;
  object-fit: contain;
  border-radius: var(--layout-border-radius-sm);
}
.qm--markdown-table-scroll {
  overflow-x: auto;
  border: var(--layout-border-weight-xs) solid var(--color-border-default);
  border-radius: var(--layout-border-radius-container-default);
  background: var(--color-background-elevated);
}
.qm--markdown table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.qm--markdown th,
.qm--markdown td {
  padding: var(--layout-padding-lg);
  color: var(--color-text-default);
  white-space: nowrap;
  font-family: var(--layout-font-family-default);
  font-size: var(--layout-font-size-body-md);
  font-style: normal;
  font-weight: var(--layout-font-weight-body-regular);
  line-height: var(--layout-font-line-height-body-md);
  letter-spacing: var(--layout-font-letter-spacing-body-md);
  border-bottom: var(--layout-border-weight-xs) solid var(--color-border-default);
  text-align: left;
}
.qm--markdown th {
  font-weight: var(--layout-font-weight-body-semibold);
}
.qm--markdown tbody tr:last-child td {
  border-bottom: none;
}

/* dist/components/ActionConfirmationButton/ActionConfirmationButton.css */
.qm--action-confirmation-button {
  position: relative;
  svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
}

/* dist/components/Menu/Menu.css */
.qm--menu {
  &.MuiPaper-root {
    background-color: var(--color-background-elevated);
    border: var(--layout-border-weight-xs) solid var(--color-border-default);
    border-radius: var(--layout-border-radius-md);
    box-shadow: 0 2px 4px -2px rgb(0 0 0 / 10%), 0 4px 6px -1px rgb(0 0 0 / 10%);
    margin: 0;
    padding: 0;
    min-width: 196px;
  }
  .MuiMenu-list {
    padding: var(--layout-padding-md);
  }
  .qm--menu-divider {
    height: var(--layout-border-weight-xs);
    background-color: var(--color-border-default);
    margin: var(--layout-gap-sm) 0;
    margin-left: calc(-1 * var(--layout-padding-md));
    margin-right: calc(-1 * var(--layout-padding-md));
  }
  .qm--menu-button-section {
    padding: var(--layout-padding-md);
    display: flex;
    align-items: center;
  }
  &.qm--menu--with-button {
    .MuiMenu-list {
      padding-bottom: 0;
    }
  }
  &.qm--menu--scrollable {
    scrollbar-width: thin;
    scrollbar-color: var(--color-icon-default) transparent;
    &::-webkit-scrollbar {
      width: 16px;
      background: transparent;
    }
    &::-webkit-scrollbar-track {
      background: transparent;
    }
    &::-webkit-scrollbar-thumb {
      background-color: var(--color-icon-default);
      border-radius: var(--layout-border-radius-md);
      border: 4px solid transparent;
      background-clip: content-box;
      &:hover {
        background-color: var(--color-text-default);
      }
    }
  }
}
.MuiMenu-root {
  .MuiMenu-paper {
    border-radius: var(--layout-border-radius-md);
  }
}
.MuiPaper-root.qm--menu-paper {
  background-color: var(--color-background-elevated);
  border: var(--layout-border-weight-xs) solid var(--color-border-default);
  border-radius: var(--layout-border-radius-md);
  box-shadow: 0 2px 4px -2px rgb(0 0 0 / 10%), 0 4px 6px -1px rgb(0 0 0 / 10%);
  margin: 0;
  padding: 0;
  min-width: 196px;
}
@media (prefers-contrast: high) {
  .qm--menu {
    .qm--menu-item {
      &:hover {
        background-color: rgb(0 0 0 / 10%);
      }
      &:focus {
        outline: 3px solid currentcolor;
      }
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .qm--menu {
    .qm--menu-item {
      transition: none;
    }
  }
}
.qm--menu-footer {
  padding: var(--layout-padding-md) var(--layout-padding-md) 0 0;
}
.qm--menu--sticky-header-footer {
  &.MuiPaper-root,
  .qm--menu-paper {
    overflow: hidden;
  }
  .MuiMenu-list {
    display: flex;
    flex-direction: column;
    max-height: inherit;
    overflow: hidden;
  }
  .qm--menu-header {
    flex-shrink: 0;
  }
  .qm--menu-scrollable-content {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--color-icon-default) transparent;
    &::-webkit-scrollbar {
      width: 16px;
      background: transparent;
    }
    &::-webkit-scrollbar-track {
      background: transparent;
    }
    &::-webkit-scrollbar-thumb {
      background-color: var(--color-icon-default);
      border-radius: var(--layout-border-radius-md);
      border: 4px solid transparent;
      background-clip: content-box;
      &:hover {
        background-color: var(--color-text-default);
      }
    }
  }
  .qm--menu-footer {
    flex-shrink: 0;
  }
}

/* dist/components/Menu/MenuItem.css */
.qm--menu-item {
  display: flex;
  align-items: flex-start;
  gap: var(--layout-gap-form-md);
  padding: var(--layout-padding-form-default) var(--layout-padding-lg);
  cursor: pointer;
  border-radius: var(--layout-border-radius-md);
  transition: background-color 0.15s ease;
  width: 100%;
  box-sizing: border-box;
  min-height: 36px;
}
.qm--menu .qm--menu-item.MuiMenuItem-root {
  padding: var(--layout-padding-form-default) var(--layout-padding-lg);
  min-height: 36px;
  background-color: transparent;
}
.qm--menu .qm--menu-item.MuiMenuItem-root:hover:not(.qm--menu-item--disabled, :focus) {
  background-color: var(--color-background-action-subtle-hover);
}
.qm--menu .qm--menu-item.MuiMenuItem-root:focus {
  outline: none;
  background-color: var(--color-background-action-subtle-selected);
  border-radius: var(--layout-border-radius-md);
}
.qm--menu .qm--menu-item.MuiMenuItem-root:active {
  background-color: var(--color-background-action-subtle-selected);
  border-radius: var(--layout-border-radius-md);
}
.qm--menu .qm--menu-item.MuiMenuItem-root:active .qm--menu-item-text {
  font-weight: var(--layout-font-weight-body-semibold);
}
.qm--menu .qm--menu-item.MuiMenuItem-root:focus .qm--menu-item-text {
  font-weight: var(--layout-font-weight-body-semibold);
}
.qm--menu .qm--menu-item.MuiMenuItem-root:focus-visible {
  outline: 2px solid var(--color-text-action-default) !important;
  outline-offset: -2px !important;
  background-color: var(--color-background-action-subtle-selected);
  border-radius: var(--layout-border-radius-md);
}
.qm--menu .qm--menu-item--selected.MuiMenuItem-root {
  background-color: var(--color-background-action-subtle-selected);
  border-radius: var(--layout-border-radius-md);
}
.qm--menu .qm--menu-item--selected.MuiMenuItem-root:hover {
  background-color: var(--color-background-action-subtle-selected);
}
.qm--menu .qm--menu-item--selected .qm--menu-item-text {
  color: var(--color-text-default);
  font-weight: var(--layout-font-weight-body-semibold);
}
.qm--menu-item-left-component {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
  svg,
  img {
    width: var(--layout-dimension-icon-sm);
    height: var(--layout-dimension-icon-sm);
    color: var(--color-icon-default);
  }
}
.qm--menu-item-right-component {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  svg,
  img {
    width: var(--layout-dimension-icon-sm);
    height: var(--layout-dimension-icon-sm);
    color: var(--color-icon-default);
  }
  .qm--menu-item-right-text {
    font-family: var(--layout-font-family-default);
    font-size: 14px;
    color: var(--color-text-subdued);
    white-space: pre;
  }
}
.qm--menu-item-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 20px;
  min-width: 0;
}
.qm--menu-item-text {
  font-family: var(--layout-font-family-default);
  font-size: 14px;
  line-height: 1.43;
  color: var(--color-text-default);
  font-weight: var(--layout-font-weight-body-normal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.qm--menu-item-description {
  font-family: var(--layout-font-family-default);
  font-size: 12px;
  line-height: 1.33;
  color: var(--color-text-subdued);
  font-weight: var(--layout-font-weight-body-normal);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qm--menu-item--disabled {
  opacity: 0.5;
}
.qm--menu-item--disabled .qm--menu-item-text,
.qm--menu-item--disabled .qm--menu-item-description {
  color: var(--color-text-disabled);
}
.qm--menu-item--disabled .qm--menu-item-left-component svg,
.qm--menu-item--disabled .qm--menu-item-left-component img,
.qm--menu-item--disabled .qm--menu-item-right-component svg,
.qm--menu-item--disabled .qm--menu-item-right-component img {
  color: var(--color-icon-disabled);
}

/* dist/components/Toolbar/Toolbar.css */
.MuiToolbar-root.qm--toolbar {
  min-height: 0;
  width: fit-content;
  gap: var(--layout-gap-xs);
  padding: var(--layout-padding-xs);
  background: var(--color-background-elevated);
  border: var(--layout-border-weight-xs) solid var(--color-border-default);
  border-radius: var(--layout-border-radius-md);
  box-shadow: 0 2px 4px -2px var(--color-effects-shadow-md), 0 4px 6px -1px var(--color-effects-shadow-md);
  &.qm--toolbar-single {
    padding: 0;
  }
}

/* dist/components/Drawer/Drawer.css */
.qm--drawer {
  .qm--drawer-content {
    display: flex;
    padding: var(--layout-padding-xl) var(--layout-padding-2xl) var(--layout-padding-xl) var(--layout-padding-xl);
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    &.no-padding {
      padding: 0;
    }
  }
}

/* dist/components/Tabs/Tabs.css */
.qm--tabs-container {
  --tab-size: 24px;
  display: flex;
  &.align-left {
    justify-content: flex-start;
  }
  &.align-center {
    justify-content: center;
  }
  &.align-right {
    justify-content: flex-end;
  }
  &.has-separator {
    &:has(.MuiTabs-root:not(.MuiTabs-vertical)) {
      border-bottom: 1px solid var(--color-border-default);
    }
    &:has(.MuiTabs-root.MuiTabs-vertical) {
      border-right: 1px solid var(--color-border-default);
    }
  }
  &.hide-padding {
    .MuiTabs-scrollButtons.Mui-disabled {
      display: none;
    }
  }
  &.show-padding:not(:has(.MuiTabs-scrollButtons)) {
    padding-left: var(--layout-padding-2xl);
    padding-right: var(--layout-padding-2xl);
  }
  .MuiTouchRipple-root {
    display: none;
  }
  .qm--tabs {
    min-height: calc(var(--tab-size) + var(--layout-gap-md));
    font-family: var(--layout-font-family-default);
    .MuiTabs-scrollButtons {
      &.MuiTabScrollButton-vertical {
        height: 20px;
      }
      &.MuiTabScrollButton-horizontal {
        width: 20px;
        margin-bottom: var(--layout-padding-lg);
      }
    }
    .MuiTabs-flexContainerHorizontal {
      .MuiButtonBase-root {
        min-height: var(--tab-size);
      }
    }
    .MuiTabs-indicator {
      background-color: var(--color-border-action-subtle-selected);
    }
    &:has(.MuiTabs-flexContainer > .Mui-disabled.Mui-selected) {
      .MuiTabs-indicator {
        background-color: var(--color-border-action-subtle-disabled);
      }
    }
    &:not(.MuiTabs-vertical) {
      .MuiTabs-scroller {
        padding-bottom: var(--layout-padding-lg);
      }
    }
    &.MuiTabs-vertical {
      .MuiTabs-scroller {
        padding-right: var(--layout-padding-md);
      }
    }
    &:has(.MuiTabScrollButton-horizontal:not(.Mui-disabled) > .start-scroll-button-icon) {
      .MuiTabs-scroller {
        mask-image:
          linear-gradient(
            to right,
            transparent,
            black var(--tab-size));
      }
    }
    &:has(.MuiTabScrollButton-horizontal:not(.Mui-disabled) > .end-scroll-button-icon) {
      .MuiTabs-scroller {
        mask-image:
          linear-gradient(
            to left,
            transparent,
            black var(--tab-size));
      }
    }
    &:has(.MuiTabScrollButton-horizontal:not(.Mui-disabled) > .start-scroll-button-icon):has(.MuiTabScrollButton-horizontal:not(.Mui-disabled) > .end-scroll-button-icon) {
      .MuiTabs-scroller {
        mask-image:
          linear-gradient(
            to right,
            transparent,
            black var(--tab-size),
            black calc(100% - var(--tab-size)),
            transparent);
      }
    }
    &:has(.MuiTabScrollButton-vertical:not(.Mui-disabled) > .start-scroll-button-icon) {
      .MuiTabs-scroller {
        mask-image:
          linear-gradient(
            to bottom,
            transparent,
            black var(--tab-size));
      }
    }
    &:has(.MuiTabScrollButton-vertical:not(.Mui-disabled) > .end-scroll-button-icon) {
      .MuiTabs-scroller {
        mask-image:
          linear-gradient(
            to top,
            transparent,
            black var(--tab-size));
      }
    }
    &:has(.MuiTabScrollButton-vertical:not(.Mui-disabled) > .start-scroll-button-icon):has(.MuiTabScrollButton-vertical:not(.Mui-disabled) > .end-scroll-button-icon) {
      .MuiTabs-scroller {
        mask-image:
          linear-gradient(
            to bottom,
            transparent,
            black var(--tab-size),
            black calc(100% - var(--tab-size)),
            transparent);
      }
    }
    .MuiTabs-flexContainer {
      gap: var(--layout-gap-md);
      .qm--tab {
        min-width: unset;
        min-height: var(--tab-size);
        gap: var(--layout-gap-sm);
        transition: background-color 0.1s linear;
        &:hover {
          background-color: var(--color-background-neutral-default);
          .MuiTab-iconWrapper {
            color: var(--color-icon-neutral-default);
          }
        }
        &:active {
          background-color: var(--color-background-neutral-selected);
        }
        &.Mui-selected {
          color: var(--color-text-action-default);
          .MuiTab-iconWrapper {
            color: var(--color-icon-action-default);
          }
          .qm--inline-edit.MuiInputBase-root,
          .MuiInputBase-input {
            cursor: text;
          }
        }
        &:not(.Mui-selected) {
          .qm--inline-edit.MuiInputBase-root,
          .MuiInputBase-input {
            cursor: pointer;
          }
        }
        &.Mui-disabled {
          color: var(--color-text-disabled);
          .MuiTab-iconWrapper {
            color: var(--color-icon-action-disabled);
          }
        }
        .MuiTab-iconWrapper {
          flex-shrink: 0;
          margin: 0;
          color: var(--color-icon-neutral-default);
        }
        .qm--tab-label-wrapper {
          display: flex;
          align-items: center;
          gap: var(--layout-padding-form-compact);
        }
        .qm--tab-label-left-icon,
        .qm--tab-label-right-icon {
          display: flex;
          align-items: center;
        }
        &.tab-wrapped {
          flex-direction: row;
          .tab-text {
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
.qm--tabs-container .qm--tabs .MuiTabs-flexContainer .qm--tab,
.tab-label-popout {
  color: var(--color-text-subdued);
  font-family: var(--layout-font-family-default);
  padding: var(--layout-padding-xs) var(--layout-padding-md);
  font-size: var(--layout-font-size-form-default);
  font-style: normal;
  font-weight: var(--layout-font-weight-form-semibold);
  text-transform: none;
  border-radius: var(--layout-border-radius-form-compact);
}
.tab-label-popout {
  cursor: pointer;
  background-color: var(--surface-color);
  box-shadow: var(--elevation-level-00-box-shadow);
}

/* dist/components/TabsWithOverflowMenu/TabsWithOverflowMenu.css */
.qm--tabs-with-overflow-container {
  display: flex;
  align-items: flex-end;
  gap: var(--layout-gap-md);
  .qm--tabs-menu-button.qm--button {
    min-height: var(--layout-dimension-form-content-outer-compact);
    height: var(--layout-dimension-form-content-outer-compact);
    padding: var(--layout-padding-sm) var(--layout-padding-md);
    margin-bottom: calc(var(--layout-dimension-md) / 2);
    font-weight: var(--layout-font-weight-form-regular);
    border-radius: var(--layout-border-radius-form-compact);
    &:hover {
      background-color: var(--color-background-neutral-default);
      color: var(--color-text-subdued);
    }
    &:active {
      background-color: var(--color-background-neutral-selected);
      color: var(--color-text-subdued);
    }
    .qm--pill {
      padding: var(--layout-padding-xs) var(--layout-padding-sm);
      border-radius: var(--layout-border-radius-xs);
      color: var(--color-text-subdued);
      font-size: var(--layout-font-size-form-compact);
      font-weight: var(--layout-font-weight-form-semibold);
      line-height: var(--layout-font-line-height-form-compact);
      letter-spacing: var(--layout-font-letter-spacing-form-compact);
      text-transform: none;
    }
  }
  &:has(.qm--inline-edit) {
    .qm--tabs-menu-button.qm--button {
      margin-bottom: var(--layout-dimension-xs);
    }
    .qm--tabs-new-button.qm--button {
      margin-bottom: var(--layout-dimension-xs);
    }
  }
  .qm--tabs-new-button.qm--button {
    width: var(--layout-dimension-form-content-outer-compact);
    height: var(--layout-dimension-form-content-outer-compact);
    margin-bottom: var(--layout-gap-xl);
    &:hover {
      background-color: var(--color-background-neutral-default);
    }
    &:active {
      background-color: var(--color-background-neutral-selected);
    }
  }
}

/* dist/components/Accordion/Accordion.css */
.MuiAccordion-root.qm--accordion {
  border-radius: var(--layout-border-radius-md);
  border: var(--layout-border-weight-xs) solid var(--color-border-default);
  background: var(--color-background-elevated);
  box-shadow: none;
  padding-bottom: var(--layout-padding-lg);
  &.Mui-disabled {
    background: var(--color-background-neutral-subtlest-disabled);
    .MuiAccordionSummary-content {
      color: var(--color-text-disabled);
    }
    .MuiAccordionSummary-root {
      opacity: 1;
    }
    &:hover {
      box-shadow: none;
    }
    .phosphor-icon {
      color: var(--color-icon-disabled);
    }
  }
  &:hover {
    box-shadow: 0 1px 2px -1px var(--color-effects-shadow-sm), 0 1px 3px 0 var(--color-effects-shadow-sm);
  }
  .MuiAccordionDetails-root {
    padding: 0;
  }
  .MuiCollapse-wrapper {
    padding-top: var(--layout-padding-sm);
  }
}
.MuiAccordionSummary-root.qm--accordion-summary {
  min-height: unset;
  flex-direction: row-reverse;
  align-items: center;
  flex: 1 0 0;
  min-width: 200px;
  padding: var(--layout-padding-md) var(--layout-padding-lg) 0 var(--layout-padding-lg);
  gap: var(--layout-gap-md);
  &.qm--accordion-summary-caret-right {
    flex-direction: row;
  }
  &.qm--accordion-summary-expanded {
    min-height: unset;
  }
  .MuiAccordionSummary-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    color: var(--color-text-subdued);
    font-family: var(--layout-font-family-default);
    font-size: var(--layout-font-size-body-md);
    font-style: normal;
    font-weight: var(--layout-font-weight-body-regular);
    line-height: var(--layout-font-line-height-body-md);
    letter-spacing: var(--layout-font-letter-spacing-body-md);
  }
  &.qm--accordion-summary-bold .MuiAccordionSummary-content {
    color: var(--color-text-default);
    font-weight: var(--layout-font-weight-body-semibold);
  }
}
.qm--accordion-summary-description {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  color: var(--color-text-subdued);
  text-align: right;
  font-family: var(--layout-font-family-default);
  font-size: var(--layout-font-size-body-md);
  font-style: normal;
  font-weight: var(--layout-font-weight-body-regular);
  line-height: var(--layout-font-line-height-body-md);
  letter-spacing: var(--layout-font-letter-spacing-body-md);
}
.qm--accordion-summary-description-body {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  max-width: none;
  text-align: left;
  padding: 0 var(--layout-padding-xl) var(--layout-padding-md) var(--layout-padding-xl);
}
.qm--accordion-summary-extras {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  max-width: 50%;
}
.qm--accordion-summary-left-icon {
  display: flex;
  align-items: center;
  margin-right: var(--layout-gap-sm);
  flex-shrink: 0;
  color: var(--color-icon-default);
}
.qm--accordion-summary-header {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: var(--layout-gap-md);
}
.qm--accordion-summary-content {
  padding: 0 var(--layout-padding-xl);
}

/* dist/components/PageHeader/PageHeader.css */
.qm--page-header {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 var(--layout-margin-page);
  gap: var(--layout-gap-xl);
  background: var(--color-background-elevated);
  border-bottom: var(--layout-border-weight-xs) solid var(--color-border-default);
}
.qm--page-header-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 48px;
  padding: 0;
  overflow: hidden;
}
.qm--page-header-title-content {
  display: flex;
  align-items: center;
  gap: var(--layout-gap-form-md);
  height: 32px;
  min-width: 48px;
  width: 100%;
  overflow: hidden;
  color: var(--color-text-default);
}
.qm--page-header-title-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.qm--page-header-tabs {
  flex: 1;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}
.qm--page-header-tabs .MuiTabs-scroller {
  padding-bottom: var(--layout-padding-lg);
}
.qm--page-header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--layout-gap-md);
}

/* dist/components/Code/Code.css */
.qm--code-snippet {
  display: flex;
  align-items: center;
  gap: var(--layout-gap-sm);
  padding: var(--layout-padding-sm);
  border-radius: var(--layout-border-radius-sm);
  background: var(--color-background-neutral-subtle-default);
  overflow: hidden;
  width: fit-content;
}
.qm--code-snippet__code {
  font-family: var(--layout-font-family-mono), monospace;
  font-size: var(--layout-font-size-code-default);
  font-weight: var(--layout-font-weight-code-regular);
  line-height: var(--layout-font-line-height-code-default);
  letter-spacing: var(--layout-font-letter-spacing-code-default);
  color: var(--color-text-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
.qm--code-block {
  display: flex;
  align-items: flex-start;
  gap: var(--layout-gap-xl);
  padding: var(--layout-padding-md) var(--layout-padding-xl);
  border-radius: var(--layout-border-radius-sm);
  background: var(--color-background-neutral-subtle-default);
  overflow: auto;
}
.qm--code-block__line-numbers {
  display: flex;
  flex-direction: column;
  font-family: var(--layout-font-family-mono), monospace;
  font-size: var(--layout-font-size-code-default);
  font-weight: var(--layout-font-weight-code-regular);
  line-height: var(--layout-font-line-height-code-default);
  letter-spacing: var(--layout-font-letter-spacing-code-default);
  color: var(--color-text-disabled);
  white-space: nowrap;
  flex-shrink: 0;
  user-select: none;
}
.qm--code-block__line-number {
  min-height: var(--layout-font-line-height-code-default);
}
.qm--code-block__content {
  flex: 1;
  margin: 0;
  padding: 0;
  min-width: 0;
  overflow: visible;
}
.qm--code-block__code {
  font-family: var(--layout-font-family-mono), monospace;
  font-size: var(--layout-font-size-code-default);
  font-weight: var(--layout-font-weight-code-regular);
  line-height: var(--layout-font-line-height-code-default);
  letter-spacing: var(--layout-font-letter-spacing-code-default);
  color: var(--color-text-default);
  white-space: pre-wrap;
  word-wrap: break-word;
  display: block;
}

/* dist/components/StatusDot/StatusDot.css */
.nova-status-dot {
  background-color: transparent;
  border-radius: 50%;
  display: block;
  min-width: 11px;
  width: 11px;
  height: 11px;
}
.nova-status-line {
  background-color: transparent;
  display: block;
  min-width: 11px;
  width: 11px;
  height: 3px;
}
.nova-status-stroke {
  background-color: transparent;
  border-radius: 1.5px;
  display: block;
  min-height: 11px;
  width: 3px;
}
.nova-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  svg {
    color: currentcolor;
  }
}
.nova-status-dot,
.nova-status-line,
.nova-status-stroke {
  &.nova-status-error {
    background-color: #e4100e;
  }
  &.nova-status-success {
    background-color: #53bc81;
  }
  &.nova-status-warning {
    background-color: #ffc82c;
  }
  &.nova-status-info {
    background-color: #616f87;
  }
}
.nova-status-dot-container {
  position: relative;
  display: inline-block;
}
.nova-status-dot-inner-icon {
  --_icon-size: 8px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-text-inverted);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--_icon-size);
  svg {
    width: var(--_icon-size);
    height: var(--_icon-size);
    color: var(--color-text-inverted);
  }
}

/* dist/components/AnchoredPopper/AnchoredPopper.css */
.anchored {
  &.is-fixed {
    position: fixed;
  }
  &.is-absolute {
    position: absolute;
  }
}
.with-directional-indicator {
  &::before {
    content: "";
    border-style: solid;
    border-width: 0.6em 0.4em 0;
    border-color: transparent;
    display: block;
    position: absolute;
  }
  &.up,
  &.up-left,
  &.up-right {
    margin-top: -0.6em;
    &::before {
      top: 100%;
    }
  }
  &.up-left {
    margin-left: 1.4em;
  }
  &.up-right {
    margin-left: -1.4em;
  }
  &.up::before {
    left: 50%;
    margin-left: -0.4em;
  }
  &.up-left::before {
    right: 1em;
  }
  &.up-right::before {
    left: 1em;
  }
  &.down,
  &.down-left,
  &.down-right {
    margin-top: 0.6em;
    &::before {
      top: 0;
      transform: rotate(180deg) translateY(100%);
    }
  }
  &.down-left {
    margin-left: 1.4em;
  }
  &.down-right {
    margin-left: -1.4em;
  }
  &.down::before {
    left: 50%;
    margin-left: -0.4em;
  }
  &.down-left::before {
    right: 1em;
  }
  &.down-right::before {
    left: 1em;
  }
  &.right,
  &.right-up,
  &.right-down {
    margin-left: 0.6em;
    &::before {
      left: calc(-0.6em - 0.1em);
      transform: rotate(90deg);
    }
  }
  &.right-down {
    margin-top: -1.4em;
  }
  &.right-up {
    margin-top: 1.4em;
  }
  &.right::before {
    top: 50%;
    margin-top: -0.4em;
  }
  &.right-up::before {
    bottom: 1em;
  }
  &.right-down::before {
    top: 1em;
  }
  &.left,
  &.left-up,
  &.left-down {
    margin-left: -0.6em;
    &::before {
      right: -0.6em;
      transform: rotate(-90deg);
    }
  }
  &.left-down {
    margin-top: -1.4em;
  }
  &.left-up {
    margin-top: 1.4em;
  }
  &.left::before {
    top: 50%;
    margin-top: -0.4em;
  }
  &.left-up::before {
    bottom: 1em;
  }
  &.left-down::before {
    top: 1em;
  }
}
.context-popup.is-within-app-content {
  z-index: 200;
}
.context-popup.is-within-window {
  z-index: 700;
}

/* dist/components/Modal/Modal.css */
.qm--modal {
  .qm--modal-inner {
    display: flex;
    position: absolute;
    flex-direction: column;
    width: 600px;
    top: 50%;
    left: 50%;
    padding: var(--layout-padding-xl) var(--layout-padding-2xl);
    gap: var(--layout-gap-xl);
    transform: translate(-50%, -50%);
    font-family: var(--layout-font-family-default);
    border-radius: var(--layout-border-radius-md);
    border: 1px solid var(--color-border-default);
    background: var(--color-background-elevated);
    box-shadow: var(--shadow-md);
    .qm--modal-title {
      color: var(--color-text-default);
      font-size: var(--layout-font-size-heading-md);
      font-weight: var(--layout-font-weight-body-semibold);
      line-height: var(--layout-font-line-height-heading-md);
      letter-spacing: var(--layout-font-letter-spacing-heading-md);
    }
    .qm--modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: var(--layout-gap-md);
    }
  }
}
.qm--modal-backdrop-blur-xs {
  backdrop-filter: var(--bg-blur-xs);
}
.qm--modal-backdrop-blur-sm {
  backdrop-filter: var(--bg-blur-sm);
}
.qm--modal-backdrop-blur-md {
  backdrop-filter: var(--bg-blur-md);
}
.qm--modal-backdrop-blur-lg {
  backdrop-filter: var(--bg-blur-lg);
}
.qm--modal-backdrop-blur-xl {
  backdrop-filter: var(--bg-blur-xl);
}

/* dist/components/ContextPopup/ContextPopup.css */
.context-popup.modal {
  background-color: var(--color-background-elevated);
  border-radius: 4px;
  box-shadow: 0 0 10px rgb(0 0 0 / 25%);
  display: flex;
  flex-direction: column;
  max-width: 90%;
  max-height: 90vh;
  position: fixed;
}
.context-popup .modal-close {
  color: var(--color-icon-default);
  font-size: 22px;
  margin-right: -0.3em;
  padding: 0.3em;
  z-index: 3;
}
.context-popup .modal-header {
  border-bottom: var(--layout-border-weight-xs) solid var(--color-border-default);
  padding: 24px 20px;
  position: relative;
  color: var(--color-text-default);
  background-color: var(--color-background-elevated);
}
.context-popup .modal-title {
  font-size: 20px;
  line-height: 1;
  margin: 0;
}
.context-popup .modal-content {
  background: var(--color-background-elevated);
  overflow: auto;
  padding: 20px;
  border-radius: 4px;
}
.modal.context-popup {
  .modal-close {
    font-size: 14px;
    top: 14px;
    right: 14px;
    transform: none;
    &:hover {
      background-color: inherit;
    }
  }
  .modal-header {
    font-size: var(--layout-font-size-form-default);
    padding: 10.5px 14px;
    padding-right: 28px;
  }
  .modal-header .modal-close {
    top: 10.5px;
    position: absolute;
  }
  .modal-title {
    font-size: inherit;
    line-height: 1.4;
    padding-right: 15px;
  }
  .modal-title .icon {
    margin: 0 8px 0 4px;
  }
  .modal-content {
    max-height: 250px;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 14px;
  }
  .modal-content p {
    margin-bottom: 12px;
  }
  .modal-content p:last-child {
    margin-bottom: 0;
  }
  &.is-inverse {
    background-color: var(--color-background-elevated);
    .modal-header {
      border-bottom-color: var(--color-border-default);
    }
    .modal-content {
      background: var(--color-background-recessed);
    }
  }
}
.context-popup {
  opacity: 0;
  &.is-positioned {
    opacity: 1;
  }
  &.popup-xs {
    width: 220px;
    .modal-close {
      right: 12px;
    }
    .modal-header {
      padding: 12px;
    }
    .modal-header .modal-close {
      top: 9px;
    }
    .modal-title {
      font-size: var(--layout-font-size-body-md);
    }
  }
  &.popup-sm {
    width: 260px;
  }
  &.popup-md {
    width: 340px;
  }
  &.popup-lg {
    width: 420px;
  }
  &.popup-xl {
    width: 500px;
  }
}
.context-popup.with-directional-indicator {
  &::before {
    border-top-color: var(--color-background-neutral-subtle-inverted);
  }
  &.is-inverse::before {
    border-top-color: var(--color-background-elevated);
  }
  &.down,
  &.down-left,
  &.down-right {
    &.is-inverse::before {
      border-top-color: var(--color-background-elevated);
    }
  }
}

/* dist/components/DataContext/DataContext.css */
.data-context {
  font-size: var(--layout-font-size-body-sm);
  display: grid;
  align-items: center;
  grid-template-columns: auto max-content;
  background-color: var(--color-background-elevated);
  &.has-status {
    align-items: stretch;
    grid-template-columns: max-content auto max-content;
  }
  li {
    display: contents;
  }
  li > span {
    border-top: solid var(--layout-border-weight-xs) var(--color-border-default);
    overflow: hidden;
    padding: var(--layout-padding-md) var(--layout-padding-none);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  li:first-child > span {
    border-top: none;
  }
  li > span:first-child {
    padding-left: var(--layout-padding-lg);
  }
  li > span:last-child {
    padding-right: var(--layout-padding-lg);
  }
  li.item-header {
    .empty {
      grid-column: span 2;
    }
  }
  .status {
    display: flex;
    align-items: center;
    padding-right: var(--layout-padding-md);
  }
  .label.is-url {
    direction: rtl;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .value,
  .historical,
  .percentage,
  .forecast {
    padding-left: var(--layout-padding-lg);
    text-align: right;
  }
}
.list-unstyled {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* dist/components/DataTooltip/DataTooltip.css */
.context-popup.data-tooltip.chart-tooltip {
  max-width: none;
  width: auto;
  .data-context.has-status {
    grid-template-columns: max-content minmax(auto, 180px) auto;
    .nova-status-dot {
      border: var(--layout-border-weight-xs) solid var(--color-border-default);
    }
  }
  .modal-content {
    max-height: none;
  }
  .funnel-step-tooltip-name {
    align-items: center;
    display: flex;
    gap: 8px;
    .step-title {
      max-width: 128px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: pre;
      display: block;
    }
  }
  &.up,
  &.up-left,
  &.up-right {
    margin-top: -12px;
  }
  &.down,
  &.down-left,
  &.down-right {
    margin-top: 12px;
  }
  &.left,
  &.left-up,
  &.left-down {
    margin-right: -12px;
  }
  &.right,
  &.right-up,
  &.right-down {
    margin-right: 12px;
  }
  &.funnel-card-tooltip {
    .data-context.has-status li:nth-child(2) {
      .nova-status-dot {
        visibility: hidden;
      }
    }
  }
}
.context-popup.has-data-context {
  min-width: 220px;
  width: auto;
  .modal-content {
    padding: 0;
  }
  &.is-inverse {
    .description {
      padding: 6px 12px;
      border-bottom: var(--layout-border-weight-xs) solid var(--color-border-default);
    }
    .data-context {
      &.has-historical {
        grid-template-columns: auto repeat(3, max-content);
        &.has-status {
          grid-template-columns: max-content auto repeat(3, max-content);
        }
        &.has-forecast {
          grid-template-columns: max-content auto repeat(4, max-content);
        }
        li:nth-child(2) > span {
          border-top-color: var(--color-border-default);
        }
      }
      li > span {
        border-top-color: var(--color-border-default);
      }
    }
  }
}

/* dist/components/Toast/Toast.css */
.qm--toast-container {
  position: fixed;
  z-index: 11101;
  right: 34px;
  top: var(--layout-core-size-10);
  max-width: 400px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap-md);
  @media (width <= 425px) {
    left: var(--layout-padding-md);
    right: var(--layout-padding-md);
    max-width: none;
    min-width: 0;
  }
}
.qm--toast {
  opacity: 0;
  transform: translateX(var(--layout-core-size-5));
  transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
}
.qm--toast-visible {
  opacity: 1;
  transform: translateX(0);
}
.qm--toast-info-purple .qm--alert .phosphor-icon {
  color: var(--purple-500);
}