/*
================================================
Nav vertical
================================================
*/

.nav--vertical {
  --nav-vertical-color: black;
  --nav-search-icon: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3.5C5.96243 3.5 3.5 5.96243 3.5 9C3.5 12.0376 5.96243 14.5 9 14.5C10.519 14.5 11.893 13.8852 12.8891 12.8891C13.8852 11.893 14.5 10.519 14.5 9C14.5 5.96243 12.0376 3.5 9 3.5ZM2 9C2 5.13401 5.13401 2 9 2C12.866 2 16 5.13401 16 9C16 10.6625 15.4197 12.1906 14.4517 13.3911L17.7803 16.7197C18.0732 17.0126 18.0732 17.4874 17.7803 17.7803C17.4874 18.0732 17.0126 18.0732 16.7197 17.7803L13.3911 14.4517C12.1906 15.4197 10.6625 16 9 16C5.13401 16 2 12.866 2 9Z' fill='%231A1A1A'/%3E%3C/svg%3E%0A");

  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.nav--vertical .nav-link,
.nav--vertical .nav-facet label {
  color: var(--nav-vertical-color);
  padding: 1px 1rem;
  font-size: 1rem !important;
  font-weight: 400;
  border-block: 0 !important;
  border-left: 3px solid transparent;
  cursor: pointer;

  &:hover,
  &:focus {
    color: var(--nav-vertical-color);
  }

  &.is-active,
  [type="checkbox"] + label {
    border-left-color: currentColor !important;
    font-weight: 700;
  }

  &.search,
  &.nav-link--search-products {
    display: inline-flex;
    background-image: var(--nav-search-icon);
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 2rem;
  }
}