/* Layout toggle icon (Grid/List) - CSS driven to prevent icon flash */
.layout-toggle {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.layout-toggle::before {
  content: "";
  width: 16px;
  height: 16px;
  display: block;
  background: center / contain no-repeat url("/Themes/TradeLink/Content/assets/icons/list.svg");
  transition: filter 150ms ease;
}

/* Hover color for the pseudo icon */
.layout-toggle:hover::before {
  filter: var(--icon-filter-orange);
}

/* When current view is list, show next icon as grid */
html.is-layout-list .layout-toggle::before {
  background-image: url("/Themes/TradeLink/Content/assets/icons/grid.svg");
}

/* ========== Desktop (lg+) ========== */
@media (min-width: 1024px) {
  .layout-toggle {
    width: 50px;
    height: 50px;
  }

  .layout-toggle::before {
    width: 21px;
    height: 21px;
  }
}