/* ============================================================
   DSFR – Banner plugin override
   Compatible Redmine 5.x / 6.x
   ============================================================ */

/* Base banner */
div.banner {
  position: relative;
  padding: 1rem 1rem 1rem 2.5rem;
  margin: 0.5rem 0;
  border-left: 4px solid transparent;
  background-color: var(--background-contrast-grey);
  color: var(--text-default-grey);
}

/* ===============================
   INFO
   =============================== */
div.banner_info {
  background-color: var(--background-contrast-info);
  border-left-color: var(--border-plain-info);
  color: var(--text-default-info);
}

div.banner_info::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 1rem;
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  mask: url("/themes/redmine_dsfr/stylesheets/dsrt/icons/system/information-line.svg") no-repeat center;
  -webkit-mask: url("/themes/redmine_dsfr/stylesheets/dsrt/icons/system/information-line.svg") no-repeat center;
}

/* ===============================
   WARNING
   =============================== */
div.banner_warn {
  background-color: var(--background-contrast-warning);
  border-left-color: var(--border-plain-warning);
  color: var(--text-default-warning);
}

div.banner_warn::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 1rem;
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  mask: url("/themes/redmine_dsfr/stylesheets/dsrt/icons/system/error-warning-line.svg") no-repeat center;
  -webkit-mask: url("/themes/redmine_dsfr/stylesheets/dsrt/icons/system/error-warning-line.svg") no-repeat center;
}

/* ===============================
   ALERT / ERROR
   =============================== */
div.banner_alert {
  background-color: var(--background-contrast-error);
  border-left-color: var(--border-plain-error);
  color: var(--text-default-error);
}

div.banner_alert::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 1rem;
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  mask: url("/themes/redmine_dsfr/stylesheets/dsrt/icons/system/fr--error-line.svg") no-repeat center;
  -webkit-mask: url("/themes/redmine_dsfr/stylesheets/dsrt/icons/system/fr--error-line.svg") no-repeat center;
}

/* ===============================
   NORMAL / DEFAULT
   =============================== */
div.banner_normal {
  background-color: var(--background-default-grey);
  border-left-color: var(--border-default-grey);
}

/* ===============================
   NO DATA
   =============================== */
div.banner_nodata {
  text-align: center;
  background-color: var(--background-contrast-grey);
  border-left-color: var(--border-default-grey);
  color: var(--text-mention-grey);
}

/* ===============================
   EDIT / ACTIONS
   =============================== */
div.banner_edit {
  background: none;
  text-align: right;
  font-size: 0.75rem;
  color: var(--text-mention-grey);
}

div.banner_area,
div.project_banner_area {
  position: relative;
}

div.banner_area div.banner_edit,
div.project_banner_area div.banner_edit {
  position: absolute;
  bottom: 0.5rem;
  right: 0.75rem;
  opacity: 0.6;
}

div.banner_area div.banner_edit:hover,
div.project_banner_area div.banner_edit:hover {
  opacity: 1;
}

/* ===============================
   ICON BUTTONS
   =============================== */
.banner-icon-off,
.banner-icon-edit {
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
}

.banner-icon-off {
  mask: url("/themes/redmine_dsfr/stylesheets/dsrt/icons/system/close-line.svg") no-repeat center;
  -webkit-mask: url("/themes/redmine_dsfr/stylesheets/dsrt/icons/system/close-line.svg") no-repeat center;
}

.banner-icon-edit {
  mask: url("/themes/redmine_dsfr/stylesheets/dsrt/icons/editor/edit-line.svg") no-repeat center;
  -webkit-mask: url("/themes/redmine_dsfr/stylesheets/dsrt/icons/editor/edit-line.svg") no-repeat center;
}

/* ===============================
   RESPONSIVE
   =============================== */
@media (max-width: 899px) {
  #content > div.banner_area {
    margin-bottom: 0.5rem;
  }
}

/* ===============================
   FADE OUT
   =============================== */
.fadeout {
  animation: fadeOut 1s both;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}