.alternative_header::before {
  content: "";
  background-color: var(--color-mono-8);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.alternative_header {
    position: sticky;
    position: -webkit-sticky;
    z-index: 1;
    top: calc(var(--global--admin-bar--height) + var(--global--header-height));
    color: var(--color-mono-1);
}

@supports (backdrop-filter: blur(6px)) {
    .alternative_header {
        backdrop-filter: blur(6px);
    }
    .alternative_header::before{
      opacity: 0.5;
    }
}

.alternative_header .content{
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
}

.breadcrumbs .parent {
    /* color: var(--color-mono-5); */
}

.breadcrumbs .current {font-weight: var(--font-weight-bold);}

.breadcrumbs a {
    text-decoration: none;
}

.breadcrumbs .parent::after {
    content: "\e01e";
    display: inline-block;
    font-family: var(--font-awesome);
    font-weight: 900;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-left: 10px;
}

.breadcrumbs > * {
    margin-right: 10px;
    display: flex;
    align-items: center;
}

.alternative_header .quick_links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-auto-flow: column;
    justify-content: end;
    grid-gap: 20px;
}

.alternative_header .quick_links a {
    text-decoration: none;
}

.alternative_header .expand_trigger{
    display: none;
    cursor: pointer;
    transition: 300ms;
}

.alternative_header .open .expand_trigger::after{
    transform: rotateX(180deg);
}

.alternative_header .content button {
    background-color: var(--color-selecting);
    font-size: var(--font-size-1);
    padding: 5px 20px;
    border-radius: 14px;
    transition: 300ms;
}

.alternative_header button:hover {
    background-color: var(--color-mono-1);
    color: var( --color-mono-8);
}
.alternative_header .expand_element:not(.open) .expand_content {
    height: auto;
    opacity: 1;
}

@media screen and (max-width: 1024px) {
  .alternative_header{
    position: relative;
    top: 0;
  }
  .alternative_header .expand_element:not(.open) .expand_content {
    height: 0;
    opacity: 0;
}
    .alternative_header .expand_trigger{
        display: flex;
    }
    .alternative_header .expand_trigger::after{
      content: "\e01c";
      display: inline-block;
      margin-left: 10px;
      font-family: var(--font-awesome);
      font-weight: 900;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      transition: 300ms;
    }

    .breadcrumbs {
      position: absolute;
      top: 100%;
      background-color: var(--color-mono-5);
      left: 0;
      width: 100%;
      display: grid;
    }
    .breadcrumbs .current{
      display: none;
    }
    .breadcrumbs .parent{
      color: var(--color-mono-1);
      display: block;
      margin: 0;
      border-top: solid 1px var(--color-mono-1);
    }
    .breadcrumbs .parent::after{
      content: unset;
    }
    .breadcrumbs a{
      display: block;
      padding: 10px 20px;
    }
    .alternative_header .quick_links :not(button) span{
      display: none;
    }
}