.-heading ul.-chips {
  flex-wrap: nowrap;
  overflow-x: scroll;
  /* scrollbar-width: none; */
  -webkit-user-drag:auto;
  /* padding-bottom:10px; */
}


.-heading ul.-chips::-webkit-scrollbar  {height: 6px;width: 96%;display:block; cursor: all-scroll;   }
.-heading ul.-chips::-webkit-scrollbar-thumb {background-color: #cecece; border-radius: 10px; background-clip: padding-box;   }
.-heading ul.-chips::-webkit-scrollbar-track {background-color: transparent;border-radius: 10px;box-shadow: inset 0px 0px 5px white;}



@media (min-width: 768px) {
  .-heading ul.-chips {
    width: calc(100% - 100px - var(--space-normal));
    /* width: 100%; */
    padding-right: var(--space-normal);
   
  }
}
@media (max-width: 767px) {
  .-heading ul.-chips {
    width: calc(100% + var(--space-normal) * 2);
    margin-left: calc(var(--space-normal) * -1);
    margin-right: calc(var(--space-normal) * -1);
    gap: 0;
    padding: 0 32px;
    padding-bottom:6px;
  }
  .-heading ul.-chips > li {
    padding-left: var(--space-normal);
    /* &:last-child {
    	padding-right: var(--space-normal);
    } */
  }
  .-heading ul.-chips > li:first-child {
    padding-left: 0;
  }
  .-heading ul.-chips > li + li {
    margin-left: -8px;
  }

  .-heading ul.-chips::-webkit-scrollbar  {height: 4px;}
  .-heading ul.-chips::-webkit-scrollbar-thumb  {border-left:calc(var(--space-normal)*2) solid transparent;border-right:calc(var(--space-normal)*2) solid transparent;}

}

ul.-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  
}



ul.-chips:has(> li > button.-chip.-menu.-active) > li > button.-chip.-menu:not(.-active) {
  color: var(--color-gray-050);
}
ul.-chips > li {
  flex-shrink: 0;
}
@media (max-width: 767px) {
  ul.-chips {
    gap: 8px;
  }
}

button.-chip,
a.-chip {
  position: relative;
  display: flex;
  gap: 32px;
  align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: none;
  padding: 14px 28px;
  box-shadow: var(--box-normal) var(--color-gray-030);
  font-size: var(--text-size-label1);
  line-height: var(--text-height-label1);
  letter-spacing: var(--text-spacing-label1);
  font-weight: 400;
  text-wrap: nowrap;
  flex-shrink: 0;
  color: currentColor;
}
button.-chip > *,
a.-chip > * {
  flex-shrink: 0;
}
@media (hover: hover) {
  button.-chip,
  a.-chip {
    cursor: pointer;
  }
  button.-chip::before,
  a.-chip::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    background-color: var(--color-gray-095);
    transition: opacity 0.25s ease;
  }
}
@media (hover: hover) {
  button.-chip:hover::before,
  a.-chip:hover::before {
    opacity: 0.05;
  }
}
@media (max-width: 767px) {
  button.-chip,
  a.-chip {
    padding: 8px 16px;
    font-size: var(--text-size-label2);
    line-height: var(--text-height-label2);
    letter-spacing: var(--text-spacing-label2);
    font-weight: 400;
  }
}
button.-chip.-toggle,
a.-chip.-toggle {
  border-radius: 1000px;
}
@media (hover: hover) {
  button.-chip.-toggle,
  a.-chip.-toggle {
    overflow: hidden;
  }
}
button.-chip.-toggle.-active,
a.-chip.-toggle.-active {
  background-color: var(--color-gray-095);
  color: var(--color-white);
  box-shadow: none;
}
button.-chip.-menu,
a.-chip.-menu {
  padding: 12px 20px;
  gap: 16px;
  font-feature-settings: "tnum";
}
@media (max-width: 767px) {
  button.-chip.-menu,
  a.-chip.-menu {
    padding: 6px 10px;
    gap: 12px;
  }
}
button.-chip.-menu .-active,
a.-chip.-menu .-active {
  display: none;
}
button.-chip.-menu .-inactive,
a.-chip.-menu .-inactive {
  display: flex;
}
button.-chip.-menu.-expand, button.-chip.-menu.-active,
a.-chip.-menu.-expand,
a.-chip.-menu.-active {
  box-shadow: var(--box-normal) currentColor;
}
button.-chip.-menu.-active .-active,
a.-chip.-menu.-active .-active {
  display: flex;
}
button.-chip.-menu.-active .-inactive,
a.-chip.-menu.-active .-inactive {
  display: none;
}/*# sourceMappingURL=style.css.map */