/* 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/. */

@import url("chrome://browser/content/profiles/profiles-pages.css");

#profile-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xlarge);
}

#profile-content h1[data-l10n-id="edit-profile-page-header"] {
  margin-block: 0;
}

#header-avatar {
  -moz-context-properties: fill, stroke;

  width: var(--header-avatar-size);
  height: var(--header-avatar-size);
  border-radius: var(--border-radius-circle);
}

#profile-name-area {
  display: flex;
  flex-direction: column;
  gap: var(--space-xsmall);
}

#profile-name-area label {
  margin-bottom: var(--space-xsmall);
}

#profile-name {
  width: min(400px, 100%);
  margin: 0;

  &:invalid {
    border-color: var(--outline-color-error);
    outline-color: var(--outline-color-error);
  }
}

.message {
  display: inline-flex;
  gap: var(--space-xsmall);
  padding: var(--space-xsmall);

  &[hidden] {
    display: none;
  }

  > .message-icon {
    -moz-context-properties: fill, stroke;
    fill: currentColor;
    stroke: currentColor;
    align-self: center;
  }
}

#error-icon,
#error-message {
  color: var(--icon-color-critical);
}

#saved-icon {
  color: var(--icon-color-success);
}

#themes::part(inputs) {
  margin-top: var(--space-medium);
}

#avatars::part(inputs) {
  margin-top: var(--space-medium);
}

#avatars::part(inputs),
#themes::part(inputs) {
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: var(--space-small);
  column-gap: var(--space-medium);
}