/**
 * @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: theme('colors.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, theme('colors.tone-neutral-02'));
  --mds-header-modal-icon-color: theme('colors.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: theme('size.1600');
  --mds-header-backdrop-show: true;
  --mds-header-z-index: var(--magma-header-z-index, 1000);
  --mds-header-inline-margin-mobile: theme('spacing.400');
  --mds-header-inline-margin: theme('spacing.600');

  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);

  @apply
    max-w-screen-wide
    rounded-lg;

  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);
  }
}

:host([menu="desktop"]) .menu {
  @apply tablet-max:hidden;
}

:host([menu="mobile"]) .menu {
  @apply desktop:hidden;
}

: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);
}

@import './css/mds-header-backdrop.css';
@import './css/mds-header-pref-theme.css';
@import './css/mds-header-pref-consumption.css';
@import '../../tailwind/fouc.css';