.ui-icon-button {
  display: grid;
  place-items: center;
  width: var(--ui-icon-button-size);
  height: var(--ui-icon-button-size);
  padding: 0;
  border: 0;
  background: transparent;
}

.ui-action-button {
  min-width: 0;
  font: inherit;
  cursor: pointer;
}

.ui-action-button:disabled { cursor: default; }

.ui-select {
  position: relative;
  min-width: 0;
}

.ui-select__trigger {
  position: relative;
  width: 100%;
  min-height: var(--ui-field-height-md);
  padding: var(--space-2) 24px var(--space-2) var(--space-6);
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-field);
  background: var(--ui-control-bg);
  color: var(--ui-value-primary);
  font-size: var(--ui-font-size-control);
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.ui-select__trigger::after {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 6px;
  height: 6px;
  transform: translateY(-65%) rotate(45deg);
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: "";
}

.ui-select__options {
  position: absolute;
  top: calc(100% + var(--space-3));
  right: 0;
  z-index: 20;
  display: grid;
  gap: var(--space-2);
  width: max(100%, 132px);
  padding: var(--space-3);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-field);
  box-shadow: var(--ui-shadow-nested-floating);
}

.ui-select__options[hidden] { display: none; }

.ui-select__option {
  min-height: var(--ui-field-height-sm);
  padding: var(--space-3) var(--space-6);
  border: 0;
  border-radius: var(--ui-radius-field);
  background: transparent;
  color: var(--ui-value-primary);
  font: inherit;
  font-size: var(--ui-font-size-control);
  text-align: start;
  cursor: pointer;
}

.ui-select__option:hover,
.ui-select__option:focus-visible {
  background: color-mix(in srgb, var(--ui-accent) 9%, var(--ui-surface-floating));
}

.ui-select__option[aria-selected="true"] {
  background: var(--ui-accent);
  color: var(--ui-text-on-accent);
}

.ui-checkbox {
  display: grid;
  place-content: center;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  appearance: none;
  background: color-mix(in srgb, var(--ui-value-primary) 14%, var(--ui-control-bg));
  color: var(--ui-text-on-accent);
  cursor: pointer;
}

.ui-checkbox::after {
  width: 4px;
  height: 7px;
  transform: translateY(-1px) rotate(45deg);
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0;
  content: "";
}

.ui-checkbox:checked { background: var(--ui-accent); }
.ui-checkbox:checked::after { opacity: 1; }
.ui-checkbox:disabled { background: var(--ui-value-disabled); cursor: default; opacity: .55; }

.ui-object-drag-handle {
  padding: 0;
  border: 0;
  color: var(--ui-object-handle-color);
  background: transparent;
  opacity: var(--ui-object-handle-opacity-rest);
  cursor: grab;
  touch-action: none;
  outline: none;
}

.ui-object-drag-handle:focus-visible {
  opacity: var(--ui-object-handle-opacity-active);
}

.ui-object-drag-handle:active { cursor: grabbing; }

.ui-delete-icon-button {
  position: relative;
}

.ui-delete-icon-button::before,
.ui-delete-icon-button::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--ui-delete-icon-size);
  height: 1px;
  background: currentColor;
  content: "";
}

.ui-delete-icon-button::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.ui-delete-icon-button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.ui-draggable-tile {
  display: flex;
  gap: var(--ui-control-gap-md);
  align-items: center;
  min-height: var(--ui-panel-row-height);
  border: 0;
  border-radius: var(--ui-radius-draggable);
  background: var(--ui-surface-draggable);
}

.ui-draggable-tile::before {
  flex: 0 0 10px;
  width: 10px;
  height: 15px;
  background: radial-gradient(circle, currentColor 1px, transparent 1.25px) center / 5px 5px;
  color: var(--ui-draggable-grip-color);
  content: "";
}

.ui-draggable-tile:not(:disabled) { cursor: grab; touch-action: none; }
.ui-draggable-tile:not(:disabled):hover { background: var(--ui-surface-draggable-hover); }
.ui-draggable-tile:not(:disabled):active { cursor: grabbing; }

.ui-quiet-button {
  padding: var(--ui-compact-padding) var(--ui-action-gap-compact);
  border: 0;
  background: transparent;
  color: var(--ui-quiet-button-color, var(--ui-value-muted));
  font-size: var(--ui-font-size-control);
  cursor: pointer;
}

.ui-quiet-button:not(:disabled):hover {
  color: var(--ui-quiet-button-hover-color, var(--ui-value-primary));
}

.ui-quiet-button--compact {
  padding: var(--space-1) var(--space-2);
  font: inherit;
}

.ui-quiet-button--popover {
  padding: var(--space-4) var(--space-6);
  font: inherit;
}

.ui-quiet-button--toast {
  padding: var(--space-2) 0;
  font-size: var(--ui-font-size-micro);
}

.ui-quiet-button--snooze {
  padding: var(--space-4) var(--space-5);
  font: inherit;
  font-size: var(--ui-font-size-micro);
}

.ui-quiet-button--settings-action {
  padding: var(--ui-compact-padding) 0;
  text-align: left;
}

.ui-quiet-button--settings-footer {
  width: 100%;
  padding: var(--space-8) 0;
  font-size: var(--ui-font-size-caption);
  text-align: left;
}

.ui-quiet-button--drawing {
  --ui-quiet-button-hover-color: var(--ui-accent);
  padding: var(--space-4) var(--space-7);
}

.ui-field {
  min-width: 0;
  border: 1px solid var(--ui-field-border, var(--ui-border));
  background: var(--ui-field-background, var(--ui-surface-field));
  color: var(--ui-value-primary);
}

.ui-field--inline {
  --ui-field-border: var(--ui-accent);
  height: var(--ui-inline-name-height);
  padding: var(--space-1) var(--space-4);
  font: inherit;
  outline: none;
}

.ui-field--time {
  height: var(--ui-field-height-sm);
  padding: var(--space-2) var(--space-4);
  font: inherit;
}

.ui-field--time-select {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-15) var(--space-2) var(--space-8);
  text-align: start;
  cursor: pointer;
}

.ui-field--settings {
  --ui-field-background: var(--ui-control-bg);
  width: 100%;
  height: var(--ui-field-height-md);
  padding: var(--space-2) var(--space-6);
  border-radius: var(--ui-radius-field);
  font-size: var(--ui-font-size-control);
}

.ui-range {
  height: var(--ui-range-hit-height);
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
}

.ui-range::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--ui-border);
}

.ui-range::-webkit-slider-thumb {
  width: var(--ui-range-thumb-size);
  height: var(--ui-range-thumb-size);
  margin-top: -4px;
  border: 0;
  border-radius: var(--ui-radius-circle);
  background: var(--ui-accent);
  appearance: none;
}

.ui-range::-moz-range-track {
  height: 2px;
  border: 0;
  background: var(--ui-border);
}

.ui-range::-moz-range-thumb {
  width: var(--ui-range-thumb-size);
  height: var(--ui-range-thumb-size);
  border: 0;
  border-radius: var(--ui-radius-circle);
  background: var(--ui-accent);
}

.ui-floating-surface { background: var(--ui-surface-floating); }
.ui-floating-surface--bordered { border: 1px solid var(--ui-border); }
.ui-floating-surface--strong-bordered { border: 1px solid var(--ui-border-strong); }
.ui-floating-surface--compact { box-shadow: var(--ui-shadow-compact-floating); }
.ui-floating-surface--nested { box-shadow: var(--ui-shadow-nested-floating); }
.ui-floating-surface--elevated { box-shadow: var(--ui-shadow-floating); }
.ui-floating-surface--toast {
  border: 1px solid var(--ui-border);
  box-shadow: var(--ui-shadow-toast);
}

.ui-dialog-surface {
  border: 1px solid var(--ui-border);
  background: var(--ui-surface-floating);
  color: var(--ui-value-primary);
}

.ui-modal-dialog::backdrop { background: var(--ui-backdrop-modal); }

.ui-tooltip-anchor::after {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  z-index: 30;
  width: max-content;
  max-width: 170px;
  padding: 4px 6px;
  transform: translateX(-50%);
  border: 1px solid var(--ui-border);
  background: var(--ui-surface-floating);
  color: var(--ui-value-primary);
  font-size: var(--ui-font-size-micro);
  font-weight: var(--ui-font-weight-regular);
  line-height: var(--ui-line-height-tooltip);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  content: attr(data-tooltip);
}

.ui-tooltip-anchor:hover::after,
.ui-tooltip-anchor:focus-visible::after { opacity: 1; }

.ui-object-type-tooltip-runtime {
  position: fixed;
  z-index: 70;
  width: max-content;
  max-width: 150px;
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-radius: var(--ui-radius-field);
  background: var(--ui-surface-floating);
  box-shadow: var(--ui-shadow-object-tooltip);
  color: var(--ui-value-primary);
  font-size: var(--ui-font-size-micro);
  font-weight: var(--ui-font-weight-regular);
  line-height: var(--ui-line-height-tooltip);
  direction: ltr;
  text-align: start;
  white-space: nowrap;
  pointer-events: none;
}

.ui-object-type-tooltip-runtime[hidden] { display: none; }
.ui-tooltip-anchor[aria-expanded="true"]::after { display: none; }