/* 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 https://mozilla.org/MPL/2.0/. */

:host {
  margin-inline: var(--arrowpanel-menuitem-margin-inline, var(--space-xsmall));
  margin-block: var(--space-xsmall);
  --illustration-margin-block-start-offset: 0px;
  --illustration-margin-block-end-offset: 0px;
  --container-margin-block-end-offset: 0px;
}

#container {
  display: flex;
  position: relative;
  flex-direction: column;
  background-color: var(--background-color-information);
  border-radius: var(--border-radius-small);
  padding-block: var(--arrowpanel-menuitem-padding-block, var(--space-small));
  padding-inline: var(--arrowpanel-menuitem-padding-inline, var(--space-small));
  margin-block-start: var(--space-small);
  color: var(--text-color);
}

#container[layout="row"] {
  margin-block-end: var(--container-margin-block-end-offset);
}

#container[layout="row"] #bottom-row {
  display: flex;
  flex-direction: row;
}

#container[layout="row"] #body-container {
  flex: 1 1 0;
  min-width: 0;
}

#close-button {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
}

#container:not([has-image]) > #illustration-container {
  display: none;
}

#container[has-image][layout="column"] > #illustration-container {
  display: flex;
  justify-content: center;
  margin-block-start: var(--illustration-margin-block-start-offset);
  margin-block-end: var(--space-xsmall);
  pointer-events: none;
}

#container[has-image][layout="row"] #illustration-container {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  margin-block-end: var(--illustration-margin-block-end-offset);
  pointer-events: none;
}

#container[has-image] #illustration-container img{
  width: var(--image-width, 120px);
}

#primary {
  font-size: 1.154em;
  font-weight: var(--font-weight-bold);
  margin-block-end: var(--space-xsmall);
}

#sign-up-button {
  margin-block-start: var(--space-medium);
}
