@use 'libs/components/theme/src/lib/styles/mixins' as mixins;

:host {
  display: block;
  padding: 10px;
}

#text-input,
#select-input {
  width: 95%;
  margin: 10px;
  padding: 10px;
}

// Mock .sky-form-control:focus style from libs/components/theme/src/lib/styles/_forms.scss:21
// without requiring interaction with the component.
.mock-active {
  @include mixins.sky-field-status(active);
}

// Space to click away from the input to trigger the blur event.
#free-space {
  content: ' ';
  height: 200px;
}
