/**
 * @prop --mds-header-backdrop-background-image: Sets the background-image of the backdrop element visibile when the component attribute `appearance` is set to `inline`, by default is shown when mds-pref-consumtion is set to `medium`
 * @prop --mds-header-backdrop-filter: Sets the backdrop-filter of the backdrop element visibile when the component attribute `appearance` is set to `inline`, by default is shown when mds-pref-consumtion is set to `high`
 * @prop --mds-header-backdrop-height: Sets the height of the backdrop element visibile when the component attribute `appearance` is set to `inline`
 * @prop --mds-header-backdrop-show: Sets if the backdrop element is visible or not, only visible when the component attribute `appearance` is set to `inline`
 * @prop --mds-header-color: Sets the text color of the header and the mobile toggler icon
 * @prop --mds-header-hidden-bar-translate-inline: Sets translateY value for the appearance inline `mds-header-bar` element
 * @prop --mds-header-hidden-bar-translate-stripe: Sets translateY value for the appearance stripe `mds-header-bar` element
 * @prop --mds-header-icon-color: Sets the color of the icon toggler
 * @prop --mds-header-inline-margin-mobile: Sets inline margin on mobile viewport of `the mds-header-bar` when attribute `appearance` is set to `inline`
 * @prop --mds-header-inline-margin: Sets inline margin of `the mds-header-bar` when attribute `appearance` is set to `inline`
 * @prop --mds-header-z-index: Sets the z-index of the modal
 */

:host {
  --mds-header-color: rgb(var(--tone-neutral-02));
  --mds-header-hidden-bar-translate-inline: translateY(-150%);
  --mds-header-hidden-bar-translate-stripe: translateY(-110%);
  --mds-header-icon-color: var(--mds-header-color, rgb(var(--tone-neutral-02)));
  --mds-header-modal-icon-color: rgb(var(--tone-neutral));
  --mds-header-backdrop-filter: blur(10px);
  --mds-header-backdrop-background-image: linear-gradient(to top, rgb(0 0 0 / 0), rgb(0 0 0 / 0.15));
  --mds-header-backdrop-height: 4rem;
  --mds-header-backdrop-show: true;
  --mds-header-z-index: var(--magma-header-z-index, 1000);
  --mds-header-inline-margin-mobile: 1rem;
  --mds-header-inline-margin: 1.5rem;

  color: var(--mds-header-color);
  fill: var(--mds-header-icon-color);
  position: relative;
  z-index: var(--mds-header-z-index);
}

.modal {
  --mds-modal-close-icon-color: var(--mds-header-modal-icon-color);

  z-index: var(--mds-header-z-index);
}

:host([appearance="inline"]) ::slotted(mds-header-bar) {
  --mds-header-inline-margin-current: var(--mds-header-inline-margin);
  max-width: 1280px;
  border-radius: 0.5rem;

  margin-bottom: var(--mds-header-inline-margin-current);
  margin-top: var(--mds-header-inline-margin-current);
  width: calc(100% - calc(var(--mds-header-inline-margin-current) * 2));
}

@media (width <= 767px) {
  :host([appearance="inline"]) ::slotted(mds-header-bar) {
    --mds-header-inline-margin-current: var(--mds-header-inline-margin-mobile);
  }
}

@media (max-width: 1023px) {

  :host([menu="desktop"]) .menu {
    display: none;
  }
}

@media (min-width: 1024px) {

  :host([menu="mobile"]) .menu {
    display: none;
  }
}

:host([menu="none"]) .menu {
  display: none;
}

:host([visibility="hidden"][appearance="stripe"]) ::slotted(mds-header-bar) {
  transform: var(--mds-header-hidden-bar-translate-stripe);
}

:host([visibility="hidden"][appearance="inline"]) ::slotted(mds-header-bar) {
  transform: var(--mds-header-hidden-bar-translate-inline);
}

.backdrop {
  align-items: center;
  backdrop-filter: var(--mds-header-backdrop-filter);
  background-image: var(--mds-header-backdrop-background-image);
  content: '';
  display: flex;
  height: var(--mds-header-backdrop-height);
  inset: 0;
  opacity: 1;
  position: fixed;
  transform: translate(0, 0);
  transition-duration: 200ms;
  transition-property: opacity, transform;
  width: 100%;


  /* should blurs the blur effect but not blurring */

  /* mask-image: linear-gradient(rgb(0 0 0 / 1), transparent); */
}

:host([appearance="inline"]) .backdrop {
  opacity: 1;
  transform: translate(0, 0);
}

:host([visibility="hidden"]) .backdrop,
:host([appearance="stripe"]) .backdrop {
  opacity: 0;
  transform: translate(0, -100%);
}

@container style(--mds-header-backdrop-show: false) {
  :host-context(:not(.safari)) .backdrop {
    display: none;
  }
}

:host-context(.pref-theme-dark) {
  --mds-header-modal-icon-color: rgb(var(--tone-neutral-01));
}

@media (prefers-color-scheme: dark) {
  :host-context(.pref-theme-system) {
    --mds-header-modal-icon-color: rgb(var(--tone-neutral-01));
  }
}

:host-context(.pref-consumption-high) .backdrop {
  --mds-header-backdrop-background-image: none;
}

:host-context(.pref-consumption-medium) .backdrop {
  --mds-header-backdrop-filter: none;
}

:host-context(.pref-consumption-low) .backdrop {
  display: none;
}

:host(:not(:is([hydrated], .hydrated))) {
  animation-duration: 0s;
  border-color: transparent;
  box-shadow: 0 0 0 transparent;
  opacity: 0;
  outline-color: transparent;
  transition-delay: 0s;
  transition-duration: 0s;
  visibility: hidden;
}

/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */

mds-accordion:not(:is([hydrated], .hydrated)),
mds-accordion-item:not(:is([hydrated], .hydrated)),
mds-accordion-timer:not(:is([hydrated], .hydrated)),
mds-accordion-timer-item:not(:is([hydrated], .hydrated)),
mds-author:not(:is([hydrated], .hydrated)),
mds-avatar:not(:is([hydrated], .hydrated)),
mds-badge:not(:is([hydrated], .hydrated)),
mds-banner:not(:is([hydrated], .hydrated)),
mds-benchmark-bar:not(:is([hydrated], .hydrated)),
mds-bibliography:not(:is([hydrated], .hydrated)),
mds-breadcrumb:not(:is([hydrated], .hydrated)),
mds-breadcrumb-item:not(:is([hydrated], .hydrated)),
mds-button:not(:is([hydrated], .hydrated)),
mds-card:not(:is([hydrated], .hydrated)),
mds-card-content:not(:is([hydrated], .hydrated)),
mds-card-footer:not(:is([hydrated], .hydrated)),
mds-card-header:not(:is([hydrated], .hydrated)),
mds-card-media:not(:is([hydrated], .hydrated)),
mds-chip:not(:is([hydrated], .hydrated)),
mds-details:not(:is([hydrated], .hydrated)),
mds-dropdown:not(:is([hydrated], .hydrated)),
mds-entity:not(:is([hydrated], .hydrated)),
mds-file:not(:is([hydrated], .hydrated)),
mds-file-preview:not(:is([hydrated], .hydrated)),
mds-filter:not(:is([hydrated], .hydrated)),
mds-filter-item:not(:is([hydrated], .hydrated)),
mds-header:not(:is([hydrated], .hydrated)),
mds-header-bar:not(:is([hydrated], .hydrated)),
mds-help:not(:is([hydrated], .hydrated)),
mds-horizontal-scroll:not(:is([hydrated], .hydrated)),
mds-hr:not(:is([hydrated], .hydrated)),
mds-icon:not(:is([hydrated], .hydrated)),
mds-img:not(:is([hydrated], .hydrated)),
mds-input:not(:is([hydrated], .hydrated)),
mds-input-field:not(:is([hydrated], .hydrated)),
mds-input-range:not(:is([hydrated], .hydrated)),
mds-input-select:not(:is([hydrated], .hydrated)),
mds-input-switch:not(:is([hydrated], .hydrated)),
mds-input-tip:not(:is([hydrated], .hydrated)),
mds-input-tip-item:not(:is([hydrated], .hydrated)),
mds-input-upload:not(:is([hydrated], .hydrated)),
mds-keyboard:not(:is([hydrated], .hydrated)),
mds-keyboard-key:not(:is([hydrated], .hydrated)),
mds-kpi:not(:is([hydrated], .hydrated)),
mds-kpi-item:not(:is([hydrated], .hydrated)),
mds-label:not(:is([hydrated], .hydrated)),
mds-list:not(:is([hydrated], .hydrated)),
mds-list-item:not(:is([hydrated], .hydrated)),
mds-modal:not(:is([hydrated], .hydrated)),
mds-note:not(:is([hydrated], .hydrated)),
mds-notification:not(:is([hydrated], .hydrated)),
mds-paginator:not(:is([hydrated], .hydrated)),
mds-paginator-item:not(:is([hydrated], .hydrated)),
mds-pref:not(:is([hydrated], .hydrated)),
mds-pref-animation:not(:is([hydrated], .hydrated)),
mds-pref-consumption:not(:is([hydrated], .hydrated)),
mds-pref-contrast:not(:is([hydrated], .hydrated)),
mds-pref-language:not(:is([hydrated], .hydrated)),
mds-pref-language-item:not(:is([hydrated], .hydrated)),
mds-pref-theme:not(:is([hydrated], .hydrated)),
mds-price-table:not(:is([hydrated], .hydrated)),
mds-price-table-features:not(:is([hydrated], .hydrated)),
mds-price-table-features-cell:not(:is([hydrated], .hydrated)),
mds-price-table-features-row:not(:is([hydrated], .hydrated)),
mds-price-table-header:not(:is([hydrated], .hydrated)),
mds-price-table-list:not(:is([hydrated], .hydrated)),
mds-price-table-list-item:not(:is([hydrated], .hydrated)),
mds-progress:not(:is([hydrated], .hydrated)),
mds-push-notification:not(:is([hydrated], .hydrated)),
mds-push-notifications:not(:is([hydrated], .hydrated)),
mds-quote:not(:is([hydrated], .hydrated)),
mds-separator:not(:is([hydrated], .hydrated)),
mds-spinner:not(:is([hydrated], .hydrated)),
mds-stepper-bar:not(:is([hydrated], .hydrated)),
mds-stepper-bar-item:not(:is([hydrated], .hydrated)),
mds-tab:not(:is([hydrated], .hydrated)),
mds-tab-bar:not(:is([hydrated], .hydrated)),
mds-tab-bar-item:not(:is([hydrated], .hydrated)),
mds-tab-item:not(:is([hydrated], .hydrated)),
mds-table:not(:is([hydrated], .hydrated)),
mds-table-body:not(:is([hydrated], .hydrated)),
mds-table-cell:not(:is([hydrated], .hydrated)),
mds-table-footer:not(:is([hydrated], .hydrated)),
mds-table-header:not(:is([hydrated], .hydrated)),
mds-table-header-cell:not(:is([hydrated], .hydrated)),
mds-table-row:not(:is([hydrated], .hydrated)),
mds-text:not(:is([hydrated], .hydrated)),
mds-toast:not(:is([hydrated], .hydrated)),
mds-tooltip:not(:is([hydrated], .hydrated)),
mds-tree:not(:is([hydrated], .hydrated)),
mds-tree-item:not(:is([hydrated], .hydrated)),
mds-url-view:not(:is([hydrated], .hydrated)),
mds-usage:not(:is([hydrated], .hydrated)),
mds-video-wall:not(:is([hydrated], .hydrated)),
mds-zero:not(:is([hydrated], .hydrated))
{
  animation-duration: 0s;
  border-color: transparent;
  box-shadow: 0 0 0 transparent;
  opacity: 0;
  outline-color: transparent;
  transition-delay: 0s;
  transition-duration: 0s;
  visibility: hidden;
}