.container {
  flex-grow: 1;
}

.container.modified textarea {
  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;
}

.container.modified textarea:hover {
  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);
}

.container.modified textarea: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));
}
.container textarea {
  width: 100%;
  padding: var(--spacing-xs);
  border: var(--border-width-thin) solid var(--color-border-default);
  border-radius: var(--border-radius-default);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  background-color: var(--color-bg-surface);
  color: var(--color-fg-default);
}

.container textarea:disabled {
  background-color: var(--color-disabled-bg);
  border: 0;
  color: var(--color-disabled-fg);
  cursor: not-allowed;
  opacity: 0.5;
}

.internalCount {
  text-align: right;
  font-size: var(--font-size-sm);
  color: var(--color-fg-subtle);
}

.container textarea:hover {
  border-color: var(--color-border-strong);
}

.container textarea:focus-visible {
  outline: none;
  border-color: var(--color-field-focus);
  box-shadow: inset 0 0 0 1px var(--color-field-focus);
}