/* 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");

:host(:not([iscopy])) {
  #profile-content {
    gap: var(--space-xlarge);
  }
}

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

.avatar-header-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-small);
  align-items: center;

  .avatar-selector-parent {
    position: relative;
  }

  profile-avatar-selector {
    position: absolute;
    inset-inline-start: -140px;
  }
}

#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(--border-color-error);
    outline-color: var(--border-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);
}

.avatar-item {
  --visual-picker-item-border-radius: var(--border-radius-circle);
}

.theme-item {
  --visual-picker-item-border-radius: 10px;
}