@use './themes/base.scss';
@use './button.scss';

// A hidden form rendered only to pre-load `ha-form`/`ha-selector`'s lazily
// imported element types.
.selector-sideload {
  display: none;
}

// Card-state notice banners sit above the section stack.
.card-config > ha-alert {
  display: block;
  margin-bottom: 8px;
}

// The alert sizes the slot its button sits in to `min-content`, which would
// otherwise break the label across lines.
.card-config > ha-alert ha-button {
  width: max-content;
  white-space: nowrap;
}

// The switch between the editors, set apart from what it switches: it is a
// control over the editor rather than one of the card settings below it. Its
// icon sits beside the form so the row reads as one of the editor's rows, each
// of which carries an icon.
.mode {
  display: flex;
  align-items: center;

  margin-bottom: 8px;
  padding: 0 10px 8px;

  border-bottom: 1px solid var(--advanced-camera-card-divider-color);
}

// Spaced and de-emphasized to match the icons on the sections below. The form
// insets its own label, so the gap here is the remainder of that spacing.
.mode advanced-camera-card-icon {
  margin-right: 8px;

  color: var(--advanced-camera-card-editor-secondary-text-color);
}

.mode ha-form {
  flex: 1;
}

// The simple editor's settings that are not in a section. They are inset to
// line up with the sections above, whose outlines the panels draw themselves.
.settings ha-form {
  display: block;

  margin: 8px 10px;
}

// Each top-level section is an HA expansion panel. An open section draws its
// own outline, which would otherwise sit directly against the neighboring
// sections, so every section is spaced whether it is open or not: a gap that
// appeared only on opening would move the sections below as the panel grew. The
// margins of two adjacent sections collapse together, so the gap is the same
// wherever it falls.
.section {
  display: block;

  margin-top: 8px;
  margin-bottom: 8px;
}

.card-config > ha-button {
  margin: 10px;
}