/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

input {
  flex: 1;
}

hbox {
  width: 100%;
}

#titleContainer {
  padding-bottom: var(--space-xlarge);
  --icon-url: url("chrome://browser/skin/preferences/category-search.svg");
}

.dialogRow {
  & > label,
  & > .error-label {
    /* Align the labels with the `html|input`s */
    margin-inline: var(--space-xsmall);
  }
}

input[type="url"]:not(:placeholder-shown) {
  /* Full URLs should always be displayed as LTR */
  direction: ltr;
  text-align: match-parent;
}

.dialogRow:not([hidden]) {
  display: flex;
  flex-direction: column;
}

.error-label {
  display: flex;
  font-size: var(--font-size-small);
  margin-top: var(--space-xxsmall);
  margin-bottom: var(--space-medium);
  align-items: center;
  gap: var(--space-xsmall);
  color: var(--text-color-error);

  visibility: hidden;
  input:user-invalid + & {
    visibility: visible;
  }

  &::before {
    content: url("chrome://global/skin/icons/error.svg");
    fill: var(--icon-color-critical);
    -moz-context-properties: fill;
    height: var(--icon-size);
    width: var(--icon-size);
    display: flex;
  }
}
