/* custom header */
/* #view-header .menu-item:not(.search) svg {
    rect {
        fill: var(--secondary-color);
    }

    path {
        fill: var(--secondary-color-contrast);
    }
} */
#app .header-bar {

  &,
  .hide-on-cms {
    display: none !important;
  }
}

#view-theme .custom-section.header-bar {
  padding-block: 8px;

  .hide-on-cms {
    text-align: center;
    display: block;
    margin-inline: auto;
  }
}

#view-header .header-bar-wrapper:not(.sticky) .header-bar:has(a) {
  --links-gap: clamp(15px, 10px + 1vw, 20px);

  display: flex !important;
  justify-content: flex-end;
  box-sizing: border-box;
  padding: 0;

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  .only-in-cms {
    display: none !important;
  }

  .container {
    display: inline-flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: var(--header-bar-bg-color, var(--secondary-color));
    color: var(--header-bar-text-color, var(--secondary-color-contrast));
    gap: 10px var(--links-gap);
    padding: 10px 20px;

    @media only screen and (min-width: 960px) {
      padding-inline: 32px;
      justify-content: flex-end;
    }
  }

  .links-with-icons,
  .top-header-buttons {
    display: flex;
    gap: var(--links-gap);
    align-items: center;

    &>div {
      &:not(:has(a)) {
        display: none;
      }
    }

    a {
      text-decoration: none;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0.02em;
      transition: all .35s ease-in-out;
      display: block;

      @media only screen and (min-width: 760px) {
        font-size: 16px;
      }
    }
  }

  .top-header-buttons {
    a {
      background-color: var(--button-bg-color, var(--primary-color));
      border: 2px solid var(--button-bg-color, var(--primary-color));
      color: var(--button-link-color, var(--primary-color-contrast));
      padding: 6px 14px;
      border-radius: 10px;

      &:hover {
        background-color: var(--secondary-color);
        color: var(--secondary-color-contrast);
      }
    }
  }

  .links-with-icons {
    &>div {
      display: flex;
      align-items: center;
      gap: 8px;
      position: relative;

      &:not(:has(svg)) {
        a {
          position: relative;
          display: inline-block;

          &::before {
            position: absolute;
            content: '';
            bottom: -2px;
            left: 0;
            width: 0%;
            height: 2px;
            background-color: currentColor;
            opacity: 0.5;
            transition: width .35s ease-in-out;
          }

          &:hover::before {
            width: 100%;
          }
        }
      }

      &:hover {
        .icon svg {
          transform: scale(1.1);
        }
      }
    }

    .icon:not(:has(svg)) {
      display: none;
    }

    .icon svg {
      width: auto;
      height: var(--icon-size, 26px);
      transition: all .35s ease-in-out;
    }

    a {
      color: currentColor;
      isolation: isolate;

      &::after {
        position: absolute;
        z-index: -1;
        content: '';
        inset: 0;
      }
    }
  }
}

@media only screen and (min-width: 1280px) {
  #view-header .header-bar-wrapper:has(.custom-section.header-bar a) {
    border-top: 6px solid var(--top-bar-border-color, var(--secondary-color));
  }

  #view-header .header-bar-wrapper:not(.sticky):has(.header-bar a) {

    .header-bar:has(a) {
      justify-content: flex-end;
      width: auto;
      display: inline-flex !important;
      position: absolute;
      right: 0;
      top: 0;
      padding-left: 89px;
      min-height: 55px;

      &::before {
        content: '';
        background-color: var(--header-bar-bg-color, var(--secondary-color));
        mask-image: url("data:image/svg+xml,%3Csvg data-v-672e66cf='' class='sloped-edge' width='97' height='56' viewBox='0 0 97 56' preserveAspectRatio='none' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath data-v-672e66cf='' d='M94.5015 56H97V0H1.00114C0.188275 0 -0.284554 0.919373 0.187909 1.58124L6.79574 10.8378C27.0277 39.1796 59.6932 56 94.5015 56Z' fill='%23BAC13E'%3E%3C/path%3E%3C/svg%3E");
        mask-repeat: no-repeat no-repeat;
        mask-position: left bottom;
        mask-size: contain;
        display: block;
        width: 97px;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
      }

      .container .buttons-wrapper {
        margin-left: -33px;
        position: relative;
      }
    }

    #h1 .header-container {
      padding-block: 6px;
      box-sizing: border-box;
      min-height: 112px;
    }

    #h1 .right {
      padding-top: 54px;
    }
  }
}

/* end custom header */