:root,
:host {
  --header-translate: calc(101% + var(--lf-clippath-height-bottom, 0px) + max(0px, var(--lf-logo-mb, 0px) * -1));
}

:is(html.transparent-header .header--top) {
  --color-transparent-header-c: 0;
  --color-transparent-header-h: 0;
}

:is(html.transparent-header--white .header--top),
:is(html.light.transparent-header--white-black .header--top),
:is(html.dark.transparent-header--black-white .header--top) {
  --color-transparent-header-l: 1;
}

:is(html.transparent-header--black .header--top),
:is(html.dark.transparent-header--white-black .header--top),
:is(html.light.transparent-header--black-white .header--top) {
  --color-transparent-header-l: 0;
}

.header-p-l,
.header-p-x {
  padding-left: var(--content-padding-left);
}

.header-p-r,
.header-p-x {
  padding-right: var(--content-padding-right);
}

.header-p-l-narrow,
.header-p-x-narrow {
  padding-left: var(--content-padding-left-narrow);
}

.header-p-r-narrow,
.header-p-x-narrow {
  padding-right: var(--content-padding-right-narrow);
}

.dropdown-narrow {
  width: max-content;
  max-width: min(90vw, 24em * var(--grid-cols, 1));
}

.dropdown-wide,
.header-wide-width {
  max-width: calc(var(--content-max-width-wide) + var(--content-padding-left) + var(--content-padding-right));
}

.dropdown-wide,
.dropdown-full {
  width: calc(100vw - var(--content-padding-left) - var(--content-padding-right));
}

.header {
  --spacing-mobilemenu: max(var(--lf-clippath-content-height-bottom, 0) + max(0px, var(--lf-logo-mb, 0px) * -1 - var(--lf-logo-mt, 0px)), 1em);
}

.scroller-opacity-x {
  --scroller-inactive: 0;
  --scroller-active: 1;
  --scroller-width: 100px;

  position: relative;
  display: grid;
  overflow-x: auto;
  grid-template: "c" minmax(0, 1fr) / minmax(0, 1fr);
  background: var(--color);
  scroll-behavior: smooth;

  & > * {
    grid-area: c;
  }

  &::before,
  &::after {
    content: "";
    grid-area: c;
    display: block;
    transition: opacity 0.3s ease;
    width: var(--scroller-width);
    position: sticky;
    pointer-events: none;
    opacity: var(--scroller-inactive, 0);
    z-index: 10;
  }

  &::before {
    background-image: linear-gradient(to right, var(--color), transparent);
    left: 0;
  }

  &::after {
    background-image: linear-gradient(to left, var(--color), transparent);
    left: calc(100% - var(--scroller-width));
  }
}

@supports (container-type: scroll-state) {
  .scroller-opacity-x {
    container-type: scroll-state;

    &::before {
      @container scroll-state(scrollable: left) {
        opacity: var(--scroller-active);
      }
    }

    &::after {
      @container scroll-state(scrollable: right) {
        opacity: var(--scroller-active);
      }
    }
  }
}

/* Because of https://github.com/parcel-bundler/lightningcss/issues/887 we can't use the minification feature from tailwindcss
  @reference "#tailwindCSS";
*/