// Rôle : expose l'API publique NDS par classes de famille et attributs data-*.
@use "controls";

.nds-input,
.nds-time,
.nds-select,
.nds-textarea {
  @include controls.field-control;
}

.nds-input::placeholder,
.nds-textarea::placeholder {
  @include controls.field-placeholder;
}

.nds-input[data-size="sm"],
.nds-textarea[data-size="sm"] {
  @include controls.field-control(sm);
}

.nds-input[data-size="xs"],
.nds-textarea[data-size="xs"] {
  @include controls.field-control(xs);
}

.nds-time {
  @include controls.time-control;
}

.nds-time[data-size="sm"] {
  @include controls.time-control(sm);
}

.nds-time[data-size="xs"] {
  @include controls.time-control(xs);
}

.nds-select {
  @include controls.select-control;
}

.nds-select[data-size="sm"] {
  @include controls.select-control(sm);
}

.nds-select[data-size="xs"] {
  @include controls.select-control(xs);
}

.nds-select:hover,
.nds-select:focus {
  @include controls.select-control-hover;
  box-shadow: none;
}

.nds-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.16);
}

.nds-select option {
  @include controls.select-option;
}

.nds-textarea {
  @include controls.field-textarea;
  @include controls.scrollbar-resizer;
}

.nds-textarea[data-size="sm"] {
  @include controls.field-textarea(sm);
}

.nds-textarea[data-size="xs"] {
  @include controls.field-textarea(xs);
}

.nds-textarea[data-variant="ghost"] {
  @include controls.field-textarea-ghost;
}

.nds-input:hover,
.nds-time:hover,
.nds-textarea:hover {
  @include controls.field-hover;
}

.nds-textarea[data-variant="ghost"]:hover {
  @include controls.inline-field-hover;
}

.nds-input:focus,
.nds-time:focus,
.nds-select:focus,
.nds-select-trigger:focus,
.nds-textarea:focus {
  @include controls.field-focus;
}

.nds-inline-input {
  @include controls.inline-field;
}

.nds-inline-input:hover,
.nds-inline-input:focus {
  @include controls.inline-field-hover;
}

.nds-button {
  @include controls.text-button;
  font-weight: 800;
}

.nds-button:hover:not(:disabled, [data-variant="primary"], [data-variant="danger"], [data-variant="ghost"], .active, .is-active, [aria-pressed="true"]) {
  @include controls.text-button-hover;
}

.nds-button[data-size="sm"] {
  @include controls.text-button(sm);
}

.nds-button[data-size="xs"] {
  @include controls.text-button(xs);
}

.nds-button[data-variant="primary"] {
  @include controls.text-button-primary;
}

.nds-button[data-variant="primary"]:hover {
  @include controls.text-button-primary-hover;
}

.nds-button[data-variant="secondary"] {
  @include controls.text-button-secondary;
}

.nds-button[data-variant="ghost"] {
  @include controls.text-button-ghost;
}

.nds-button[data-variant="ghost"]:hover {
  @include controls.text-button-ghost-hover;
}

.nds-button[data-variant="dashed"] {
  @include controls.text-button-dashed;
}

.nds-button[data-variant="dashed"]:hover {
  @include controls.text-button-dashed-hover;
}

.nds-button[data-variant="danger"] {
  @include controls.text-button-danger;
}

.nds-button[data-variant="danger"]:hover {
  @include controls.text-button-danger-hover;
}

.nds-button[data-edge="left"] {
  @include controls.button-edge(left);
}

.nds-button[data-edge="middle"] {
  @include controls.button-edge(middle);
}

.nds-button[data-edge="top"] {
  @include controls.button-edge(top);
}

.nds-button[data-edge="center"] {
  @include controls.button-edge(center);
}

.nds-button[data-edge="right"] {
  @include controls.button-edge(right);
}

.nds-button[data-edge="bottom"] {
  @include controls.button-edge(bottom);
}

.nds-button[data-edge="top-left"] {
  @include controls.button-edge(top-left);
}

.nds-button[data-edge="top-right"] {
  @include controls.button-edge(top-right);
}

.nds-button[data-edge="bottom-right"] {
  @include controls.button-edge(bottom-right);
}

.nds-button[data-edge="bottom-left"] {
  @include controls.button-edge(bottom-left);
}

.nds-button[data-border="joined"][data-edge="left"] {
  @include controls.button-joined-border(left);
}

.nds-button[data-border="joined"][data-edge="middle"] {
  @include controls.button-joined-border(middle);
}

.nds-button[data-border="joined"][data-edge="top"] {
  @include controls.button-joined-border(top);
}

.nds-button[data-border="joined"][data-edge="center"] {
  @include controls.button-joined-border(center);
}

.nds-button[data-border="joined"][data-edge="right"] {
  @include controls.button-joined-border(right);
}

.nds-button[data-border="joined"][data-edge="bottom"] {
  @include controls.button-joined-border(bottom);
}

.nds-button[data-border="joined"][data-edge="top-left"] {
  @include controls.button-joined-border(top-left);
}

.nds-button[data-border="joined"][data-edge="top-right"] {
  @include controls.button-joined-border(top-right);
}

.nds-button[data-border="joined"][data-edge="bottom-right"] {
  @include controls.button-joined-border(bottom-right);
}

.nds-button[data-border="joined"][data-edge="bottom-left"] {
  @include controls.button-joined-border(bottom-left);
}

.nds-button[data-border="none"] {
  @include controls.button-borderless;
}

.nds-button.is-active,
.nds-button.active,
.nds-button.active,
.nds-button.is-active,
.nds-button[aria-pressed="true"] {
  @include controls.text-button-active;
}

.nds-icon-button {
  @include controls.icon-button;
  display: inline-grid;
  place-items: center;
  box-shadow: none;
}

.nds-icon-button .ui-icon {
  @include controls.icon-button-icon;
}

.nds-icon-button[class*="drag-handle"] {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.nds-icon-button[class*="drag-handle"]:active {
  cursor: grabbing;
}

.nds-icon-button[class*="drag-handle"]:disabled {
  cursor: not-allowed;
}

.nds-icon-button:hover:not([data-variant="primary"], [data-variant="danger"], [data-variant="ghost"], .active, .is-active, [aria-pressed="true"]) {
  @include controls.icon-button-hover;
}

.nds-icon-button:hover:not([data-variant="primary"], [data-variant="danger"], [data-variant="ghost"], .active, .is-active, [aria-pressed="true"]) .ui-icon {
  @include controls.icon-button-hover-icon;
}

.nds-icon-button[data-size="sm"] {
  @include controls.icon-button(sm);
}

.nds-icon-button[data-size="sm"] .ui-icon {
  @include controls.icon-button-icon(sm);
}

.nds-icon-button[data-size="xs"] {
  @include controls.icon-button(xs);
}

.nds-icon-button[data-size="xs"] .ui-icon {
  @include controls.icon-button-icon(xs);
}

.nds-icon-button[data-size="xxs"] {
  @include controls.icon-button(xxs);
}

.nds-icon-button[data-size="xxs"] .ui-icon {
  @include controls.icon-button-icon(xxs);
}

.nds-icon-button[data-size="tiny"] {
  @include controls.icon-button(tiny);
}

.nds-icon-button[data-size="tiny"] .ui-icon {
  @include controls.icon-button-icon(tiny);
}

.nds-icon-button[data-size="micro"] {
  @include controls.icon-button(micro);
}

.nds-icon-button[data-size="micro"] .ui-icon {
  @include controls.icon-button-icon(micro);
}

.nds-icon-button[data-variant="primary"] {
  @include controls.icon-button-primary;
}

.nds-icon-button[data-variant="primary"]:hover {
  @include controls.icon-button-primary-hover;
}

.nds-icon-button[data-variant="primary"]:hover .ui-icon {
  @include controls.icon-button-primary-hover-icon;
}

.nds-icon-button[data-variant="ghost"] {
  @include controls.icon-button-ghost;
}

.nds-icon-button[data-variant="panel-toggle"] {
  @include controls.icon-button-panel-toggle;
}

.nds-icon-button[data-variant="panel-toggle"]:hover,
.nds-icon-button[data-variant="panel-toggle"].active,
.nds-icon-button[data-variant="panel-toggle"].is-active,
.nds-icon-button[data-variant="panel-toggle"][aria-pressed="true"] {
  @include controls.icon-button-panel-toggle-hover;
}

.nds-icon-button[data-variant="danger"] {
  @include controls.icon-button-danger;
}

.nds-icon-button[data-variant="danger"]:hover {
  @include controls.icon-button-danger-hover;
}

.nds-icon-button[data-variant="danger"]:hover .ui-icon {
  @include controls.icon-button-danger-hover-icon;
}

.nds-icon-button[class*="drag-handle"]:hover {
  cursor: grab;
}

.nds-icon-button[class*="drag-handle"]:active,
.nds-icon-button[class*="drag-handle"]:hover:active {
  cursor: grabbing;
}

.nds-icon-button[data-edge="left"] {
  @include controls.button-edge(left);
}

.nds-icon-button[data-edge="middle"] {
  @include controls.button-edge(middle);
}

.nds-icon-button[data-edge="top"] {
  @include controls.button-edge(top);
}

.nds-icon-button[data-edge="center"] {
  @include controls.button-edge(center);
}

.nds-icon-button[data-edge="right"] {
  @include controls.button-edge(right);
}

.nds-icon-button[data-edge="bottom"] {
  @include controls.button-edge(bottom);
}

.nds-icon-button[data-edge="top-left"] {
  @include controls.button-edge(top-left);
}

.nds-icon-button[data-edge="top-right"] {
  @include controls.button-edge(top-right);
}

.nds-icon-button[data-edge="bottom-right"] {
  @include controls.button-edge(bottom-right);
}

.nds-icon-button[data-edge="bottom-left"] {
  @include controls.button-edge(bottom-left);
}

.nds-icon-button[data-border="joined"][data-edge="left"] {
  @include controls.button-joined-border(left);
}

.nds-icon-button[data-border="joined"][data-edge="middle"] {
  @include controls.button-joined-border(middle);
}

.nds-icon-button[data-border="joined"][data-edge="top"] {
  @include controls.button-joined-border(top);
}

.nds-icon-button[data-border="joined"][data-edge="center"] {
  @include controls.button-joined-border(center);
}

.nds-icon-button[data-border="joined"][data-edge="right"] {
  @include controls.button-joined-border(right);
}

.nds-icon-button[data-border="joined"][data-edge="bottom"] {
  @include controls.button-joined-border(bottom);
}

.nds-icon-button[data-border="joined"][data-edge="top-left"] {
  @include controls.button-joined-border(top-left);
}

.nds-icon-button[data-border="joined"][data-edge="top-right"] {
  @include controls.button-joined-border(top-right);
}

.nds-icon-button[data-border="joined"][data-edge="bottom-right"] {
  @include controls.button-joined-border(bottom-right);
}

.nds-icon-button[data-border="joined"][data-edge="bottom-left"] {
  @include controls.button-joined-border(bottom-left);
}

.nds-icon-button[data-border="none"] {
  @include controls.button-borderless;
}

.nds-icon-button.active,
.nds-icon-button.is-active,
.nds-icon-button[aria-pressed="true"] {
  @include controls.icon-button-active;
}

.nds-quantity-stepper {
  @include controls.quantity-stepper;
}

.nds-quantity-stepper[data-size="sm"] {
  @include controls.quantity-stepper(sm);
}

.nds-quantity-stepper[data-size="xs"] {
  @include controls.quantity-stepper(xs);
}

.nds-quantity-stepper button {
  @include controls.quantity-stepper-button;
}

.nds-quantity-stepper[data-size="sm"] button {
  @include controls.quantity-stepper-button(sm);
}

.nds-quantity-stepper[data-size="xs"] button {
  @include controls.quantity-stepper-button(xs);
}

.nds-quantity-stepper button:hover {
  @include controls.quantity-stepper-button-hover;
}

.nds-quantity-stepper .ui-icon {
  @include controls.quantity-stepper-button-icon;
}

.nds-quantity-stepper[data-size="sm"] .ui-icon {
  @include controls.quantity-stepper-button-icon(sm);
}

.nds-quantity-stepper[data-size="xs"] .ui-icon {
  @include controls.quantity-stepper-button-icon(xs);
}

.nds-quantity-stepper-value {
  @include controls.quantity-stepper-value;
}

.nds-quantity-stepper-input {
  @include controls.quantity-stepper-input;
  @include controls.number-spinner-reset;
}

.nds-quantity-stepper-input:hover,
.nds-quantity-stepper-input:focus {
  @include controls.quantity-stepper-input-hover;
}

.nds-switch {
  @include controls.switch-control;
}

.nds-switch[data-size="lg"] {
  @include controls.switch-control(lg);
}

.nds-switch[data-size="sm"] {
  @include controls.switch-control(sm);
}

.nds-switch[data-size="xs"] {
  @include controls.switch-control(xs);
}

.nds-switch:has(> span:not(.ui-icon)) {
  grid-template-columns: var(--nds-switch-icon-size) minmax(0, 1fr) var(--nds-switch-track-width);
  min-width: max-content;
}

.nds-switch:has(> span:not(.ui-icon)) > span:not(.ui-icon) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nds-switch .ui-icon {
  @include controls.switch-icon;
}

.nds-switch i {
  @include controls.switch-track;
}

.nds-switch i::before {
  @include controls.switch-thumb;
}

.nds-switch:hover {
  @include controls.switch-hover;
}

.nds-switch.active,
.nds-switch.is-active,
.nds-switch[aria-pressed="true"] {
  @include controls.switch-active;
}

.nds-switch.active i,
.nds-switch.is-active i,
.nds-switch[aria-pressed="true"] i {
  @include controls.switch-active-track;
}

.nds-switch.active i::before,
.nds-switch.is-active i::before,
.nds-switch[aria-pressed="true"] i::before {
  @include controls.switch-active-thumb;
}

.nds-native-switch {
  @include controls.native-switch-label;
}

.nds-native-switch input {
  @include controls.native-switch-input;
}

.nds-native-switch > span:first-of-type {
  --nds-switch-track-width: 36px;
  --nds-switch-track-height: 20px;
  --nds-switch-thumb-size: 12px;
  --nds-switch-thumb-left: 3px;
  --nds-switch-active-left: 19px;
  @include controls.switch-track;
  min-width: 36px;
}

.nds-native-switch > span:first-of-type::before {
  @include controls.switch-thumb;
}

.nds-native-switch input:checked + span {
  @include controls.switch-active-track;
}

.nds-native-switch input:checked + span::before {
  @include controls.switch-active-thumb;
}

.nds-native-switch:has(input:disabled) {
  @include controls.control-disabled;
  cursor: not-allowed;
}

.nds-native-switch:has(input:disabled) > span:first-of-type,
.nds-native-switch:has(input:disabled) b {
  cursor: not-allowed;
}

.nds-radio-button-group {
  @include controls.radio-button-group;
}

.nds-radio-button-group[data-size="sm"] {
  @include controls.radio-button-group(sm);
}

.nds-radio-button-group[data-size="xs"] {
  @include controls.radio-button-group(xs);
}

.nds-radio-button-group > button,
.nds-radio-button-group > span {
  @include controls.radio-button-group-option;
}

.nds-radio-button-group[data-size="sm"] > button,
.nds-radio-button-group[data-size="sm"] > span {
  @include controls.radio-button-group-option(sm);
}

.nds-radio-button-group[data-size="xs"] > button,
.nds-radio-button-group[data-size="xs"] > span {
  @include controls.radio-button-group-option(xs);
}

.nds-radio-button-group > button:hover,
.nds-radio-button-group > span:hover {
  @include controls.radio-button-group-option-hover;
}

.nds-radio-button-group > button.active,
.nds-radio-button-group > button.is-active,
.nds-radio-button-group > span.active,
.nds-radio-button-group > span.is-active {
  @include controls.radio-button-group-option-active;
}

.nds-radio-button-group .ui-icon {
  @include controls.radio-button-group-option-icon;
}

.nds-radio-button-group[data-size="sm"] .ui-icon {
  @include controls.radio-button-group-option-icon(sm);
}

.nds-radio-button-group[data-size="xs"] .ui-icon {
  @include controls.radio-button-group-option-icon(xs);
}

.nds-radio-button-group[aria-disabled="true"] {
  @include controls.control-disabled;
}

.nds-compound-toggle-field {
  @include controls.compound-toggle-field;
}

.nds-compound-toggle-field button {
  @include controls.compound-toggle-field-option;
}

.nds-compound-toggle-field button:hover:not(:disabled) {
  @include controls.radio-button-group-option-hover;
}

.nds-compound-toggle-field button.is-active,
.nds-compound-toggle-field button.active,
.nds-compound-toggle-field button[aria-pressed="true"] {
  @include controls.radio-button-group-option-active;
}

.nds-compound-toggle-field-input {
  @include controls.compound-toggle-field-input;
}

.nds-compound-toggle-field-input:hover,
.nds-compound-toggle-field-input:focus {
  @include controls.inline-field-hover;
}

.nds-checkbox {
  @include controls.checkbox-control;
}

.nds-checkbox[data-size="xs"] {
  @include controls.checkbox-control(xs);
}

.nds-checkbox[data-size="sm"] {
  @include controls.checkbox-control(sm);
}

.nds-checkbox::before {
  @include controls.checkbox-check;
}

.nds-checkbox[data-size="xs"]::before {
  @include controls.checkbox-check(xs);
}

.nds-checkbox[data-size="sm"]::before {
  @include controls.checkbox-check(sm);
}

.nds-checkbox:hover:not(:disabled) {
  @include controls.checkbox-hover;
}

.nds-checkbox:checked {
  @include controls.checkbox-checked;
}

.nds-checkbox:checked::before {
  @include controls.checkbox-checked-check;
}

.nds-checkbox:disabled {
  @include controls.checkbox-disabled;
}

.nds-checkbox:disabled::before {
  opacity: 0.54;
}

.nds-swatch {
  @include controls.color-swatch;
}

.nds-swatch[data-variant="rainbow"] {
  @include controls.color-swatch-rainbow;
}

.nds-swatch.active,
.nds-swatch.is-active,
.nds-swatch[aria-pressed="true"] {
  @include controls.color-swatch-active;
}

.nds-select-trigger,
.nds-date-trigger {
  @include controls.select-trigger;
}

.nds-select-trigger[data-size="sm"],
.nds-date-trigger[data-size="sm"] {
  @include controls.select-trigger(sm);
}

.nds-select-trigger[data-size="xs"],
.nds-date-trigger[data-size="xs"] {
  @include controls.select-trigger(xs);
}

.nds-select-trigger[data-variant="icon-picker"] {
  grid-template-columns: minmax(18px, 1fr);
  justify-items: center;
  min-width: 52px;
  padding-inline: 10px 30px;
}

.nds-select-trigger[data-variant="icon-picker"]:has(> span:not([aria-hidden="true"])) {
  grid-template-columns: 18px minmax(0, 1fr);
  justify-items: start;
  padding-inline: 10px 34px;
}

.nds-select-trigger[data-size="sm"][data-variant="icon-picker"] {
  grid-template-columns: minmax(18px, 1fr);
  min-width: 50px;
  padding-inline: 10px 30px;
}

.nds-select-trigger[data-size="sm"][data-variant="icon-picker"]:has(> span:not([aria-hidden="true"])) {
  grid-template-columns: 18px minmax(0, 1fr);
  padding-inline: 10px 34px;
}

.nds-select-trigger[data-size="xs"][data-variant="icon-picker"] {
  grid-template-columns: minmax(16px, 1fr);
  min-width: 46px;
  padding-inline: 9px 28px;
}

.nds-select-trigger[data-size="xs"][data-variant="icon-picker"]:has(> span:not([aria-hidden="true"])) {
  grid-template-columns: 16px minmax(0, 1fr);
  padding-inline: 8px 30px;
}

.nds-select-trigger:hover:not(:disabled),
.nds-select-trigger.is-active,
.nds-select-trigger.active,
.nds-select-trigger[aria-pressed="true"],
.nds-date-trigger:hover:not(:disabled),
.nds-date-trigger.is-active,
.nds-date-trigger.active,
.nds-date-trigger[aria-pressed="true"] {
  @include controls.select-trigger-hover;
}

.nds-select-trigger:focus,
.nds-date-trigger:focus {
  @include controls.select-trigger-hover;
  @include controls.field-focus;
  outline: 2px solid var(--color-accent-gold);
  outline-offset: 3px;
}

.nds-select-trigger[data-size="sm"]:hover:not(:disabled),
.nds-select-trigger[data-size="sm"].is-active,
.nds-select-trigger[data-size="sm"].active,
.nds-select-trigger[data-size="sm"][aria-pressed="true"],
.nds-date-trigger[data-size="sm"]:hover:not(:disabled),
.nds-date-trigger[data-size="sm"].is-active,
.nds-date-trigger[data-size="sm"].active,
.nds-date-trigger[data-size="sm"][aria-pressed="true"] {
  @include controls.select-trigger-hover(sm);
}

.nds-select-trigger[data-size="sm"]:focus,
.nds-date-trigger[data-size="sm"]:focus {
  @include controls.select-trigger-hover(sm);
  @include controls.field-focus;
  outline: 2px solid var(--color-accent-gold);
  outline-offset: 3px;
}

.nds-select-trigger[data-size="xs"]:hover:not(:disabled),
.nds-select-trigger[data-size="xs"].is-active,
.nds-select-trigger[data-size="xs"].active,
.nds-select-trigger[data-size="xs"][aria-pressed="true"],
.nds-date-trigger[data-size="xs"]:hover:not(:disabled),
.nds-date-trigger[data-size="xs"].is-active,
.nds-date-trigger[data-size="xs"].active,
.nds-date-trigger[data-size="xs"][aria-pressed="true"] {
  @include controls.select-trigger-hover(xs);
}

.nds-select-trigger[data-size="xs"]:focus,
.nds-date-trigger[data-size="xs"]:focus {
  @include controls.select-trigger-hover(xs);
  @include controls.field-focus;
  outline: 2px solid var(--color-accent-gold);
  outline-offset: 3px;
}

.nds-select-trigger .ui-icon,
.nds-date-trigger .ui-icon {
  @include controls.select-trigger-icon;
}

.nds-select-trigger[data-size="sm"] .ui-icon,
.nds-date-trigger[data-size="sm"] .ui-icon {
  @include controls.select-trigger-icon(sm);
}

.nds-select-trigger[data-size="xs"] .ui-icon,
.nds-date-trigger[data-size="xs"] .ui-icon {
  @include controls.select-trigger-icon(xs);
}

.nds-select-trigger .ui-icon-chevron-down,
.nds-date-trigger .ui-icon-chevron-down {
  @include controls.date-picker-trigger-chevron;
}

.nds-select-trigger[data-variant="icon-picker"] > .ui-icon:not(.ui-icon-chevron-down) {
  width: 18px;
  height: 18px;
}

.nds-select-trigger[data-variant="icon-picker"]:has(> span:not([aria-hidden="true"])) > .ui-icon:not(.ui-icon-chevron-down) {
  justify-self: center;
}

.nds-select-trigger[data-size="xs"][data-variant="icon-picker"] > .ui-icon:not(.ui-icon-chevron-down) {
  width: 16px;
  height: 16px;
}

.nds-select-trigger span,
.nds-date-trigger span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nds-list-row {
  @include controls.list-row-button;
}

.nds-list-row:hover,
.nds-list-row.is-active,
.nds-list-row.active {
  @include controls.list-row-button-hover;
}

.nds-list-row.is-active,
.nds-list-row.active {
  @include controls.list-row-button-active;
}

.nds-list-row button {
  @include controls.list-row-button-content;
}

.nds-large-icon-picker-trigger {
  @include controls.large-icon-picker-trigger;
}

.nds-large-icon-picker-trigger:hover {
  @include controls.large-icon-picker-trigger-hover;
}

.nds-large-icon-picker-trigger.active,
.nds-large-icon-picker-trigger.is-active,
.nds-large-icon-picker-trigger[aria-pressed="true"] {
  @include controls.large-icon-picker-trigger-hover;
  border-color: rgba(246, 196, 83, 0.62);
  box-shadow:
    0 0 0 1px rgba(246, 196, 83, 0.22),
    0 0 22px rgba(139, 92, 246, 0.24);
}

.nds-large-icon-picker-trigger img,
.nds-large-icon-picker-trigger .ui-icon {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.nds-event-surface {
  --nds-event-color: #8b5cf6;
  box-sizing: border-box;
  width: min(210px, 100%);
  min-height: 44px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--nds-event-color) 24%, rgba(255, 255, 255, 0.22));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--nds-event-color) 82%, transparent);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

.nds-event-surface[data-size="md"] {
  min-height: 44px;
}

.nds-event-surface[data-size="sm"] {
  min-height: 22px;
}

.nds-event-surface[data-size="xs"] {
  min-height: 10px;
  border-width: 0;
  border-radius: 4px;
}

.nds-event-surface[data-variant="dark"] {
  border-color: color-mix(in srgb, var(--nds-event-color) 42%, rgba(11, 14, 27, 0.28));
  background: color-mix(in srgb, var(--nds-event-color) 88%, transparent);
}

.nds-event-surface button {
  @include controls.event-surface-button;
  @include controls.event-surface-contrast-default;
}

.nds-event-surface button:hover,
.nds-event-surface button:focus-visible {
  @include controls.event-surface-button-hover;
}

.nds-event-surface[data-size="sm"] button {
  display: block;
  padding: 4px 7px;
  text-align: center;
}

.nds-event-surface[data-size="xs"] button {
  position: relative;
  display: block;
  padding: 0 4px;
  text-align: center;
}

.nds-event-surface[data-size="xs"] button:hover,
.nds-event-surface[data-size="xs"] button:focus-visible {
  background: rgba(0, 0, 0, 0.18);
}

.nds-event-surface[data-size="sm"] button > span {
  display: none;
}

.nds-event-surface[data-size="xs"] button > span {
  display: none;
}

.nds-event-surface strong,
.nds-event-surface span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nds-event-surface[data-variant="dark"] button {
  @include controls.event-surface-contrast-dark;
}

.nds-event-surface strong {
  font-size: 11px;
  line-height: 14px;
}

.nds-event-surface[data-size="sm"] strong {
  max-width: 100%;
  line-height: 14px;
}

.nds-event-surface[data-size="xs"] strong {
  position: absolute;
  top: 0;
  right: 4px;
  left: 4px;
  max-width: 100%;
  height: 10px;
  font-size: 8px;
  line-height: 10px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}

.nds-event-surface span {
  font-size: 10px;
  line-height: 12px;
  opacity: 0.86;
}

.nds-scrollbox,
.nds-textarea {
  width: 100%;
  @include controls.scrollbar-control;
}

.nds-scrollbox {
  max-height: 400px;
  overflow: auto;
  padding: 12px;
  border: 1px solid rgba(165, 180, 252, 0.12);
  border-radius: var(--radius-md);
  background: rgba(5, 7, 17, 0.34);
  color: var(--color-text-secondary);
}

.nds-scrollbox[data-variant="ghost"] {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.nds-scrollbox[data-axis="horizontal"] {
  max-height: none;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.nds-input:focus-visible,
.nds-time:focus-visible,
.nds-select:focus-visible,
.nds-textarea:focus-visible,
.nds-inline-input:focus-visible,
.nds-button:focus-visible,
.nds-icon-button:focus-visible,
.nds-switch:focus-visible,
.nds-radio-button-group button:focus-visible,
.nds-checkbox:focus-visible,
.nds-select-trigger:focus-visible,
.nds-date-trigger:focus-visible,
.nds-large-icon-picker-trigger:focus-visible {
  @include controls.field-focus;
  outline: 2px solid var(--color-accent-gold);
  outline-offset: 3px;
}

.nds-button:disabled,
.nds-icon-button:disabled,
.nds-quantity-stepper button:disabled,
.nds-select:disabled,
.nds-select-trigger:disabled,
.nds-input:disabled,
.nds-time:disabled,
.nds-textarea:disabled,
.nds-date-trigger:disabled,
.nds-large-icon-picker-trigger:disabled {
  @include controls.control-disabled;
}