.triggerModified {
  background-color: color-mix(in srgb, var(--color-status-warning-bg) 22%, var(--color-bg-surface));
  border-color: color-mix(
    in srgb,
    var(--color-status-warning-border) 45%,
    var(--color-border-default)
  );
  border-left-color: var(--color-status-warning-border);
  border-left-width: 4px;
}

.triggerModified:hover:not([disabled]) {
  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
  border-color: color-mix(
    in srgb,
    var(--color-status-warning-border) 60%,
    var(--color-border-default)
  );
  border-left-color: var(--color-status-warning-border);
}

.triggerModified:focus-visible {
  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
  border-color: color-mix(
    in srgb,
    var(--color-status-warning-border) 75%,
    var(--color-border-default)
  );
  border-left-color: var(--color-status-warning-border);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
}

.selectedOption > button {
  background-color: var(--color-bg-toolbar-hover);
}

.selectedOption > button:hover,
.selectedOption > button:focus-visible {
  background-color: var(--color-bg-toolbar-hover);
}