/* 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://global/skin/in-content/common.css");

:host {
  display: block;
  border-radius: 4px;
}

#message-bar-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  margin: 0;
}

:host([type="stale"]) #message-bar-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 8px;

  > span {
    display: flex;
    flex-direction: column;
    align-self: center;
  }
}

button {
  margin-inline-start: 0;
}

message-bar::part(container) {
  align-items: start;
  padding: 0.5rem 0.75rem;
  gap: 0.75rem;
}

message-bar::part(icon) {
  padding: 0;
}

:host([type=analysis-in-progress]) message-bar::part(icon),
:host([type=reanalysis-in-progress]) message-bar::part(icon) {
  border: 1px solid var(--icon-color);
  border-radius: 50%;
}

:host([type=analysis-in-progress]) message-bar::part(icon)::after,
:host([type=reanalysis-in-progress]) message-bar::part(icon)::after {
  --message-bar-icon-url: conic-gradient(var(--icon-color-information) var(--analysis-progress-pcent, 0%), transparent var(--analysis-progress-pcent, 0%));
  border-radius: 50%;
  margin-block: 1px 0;
  margin-inline: 1px 0;
  width: calc(var(--icon-size) - 2px);
  height: calc(var(--icon-size) - 2px);
}

:host([type=reanalysis-in-progress]) message-bar::part(container),
:host([type=stale]) message-bar::part(container) {
  align-items: center;
  background-color: transparent;
  padding: 0;
}

:host([type=thank-you-for-feedback]) message-bar::part(icon) {
  --message-bar-icon-url: url("chrome://global/skin/icons/check-filled.svg");
}

:host([type=thank-you-for-feedback]) message-bar::part(container) {
  text-align: start;
  align-items: center;
  gap: 12px;
}