/* EDELMAN COLOR LIBRARY

   Supplements 23_color_search.css */

/* Isotope absolutely positions its items, which a grid container cannot host — the
   same trade products.css makes for the sortable PDP tray. swatch_filter_controller
   adds the class, so the page the server sends is still a real grid. fitRows has no
   row gap of its own; that comes off the item's bottom margin. */
.color-swatch-grid.is-filterable {
  display: block;

  .color-swatch-item {
    margin-bottom: var(--swatch-gap);
  }
}

/* fitRows measures the column gap off this. Out of flow in both states, because a
   grid cell before Isotope and a row of its own after is what it must not become. */
.color-swatch-gutter-sizer {
  position: absolute;
  width: var(--swatch-gap);
  height: 0;
}

/* Four selectors deep so it beats the @media (hover: hover) reveal in
   23_color_search.css regardless of which sheet loads first. */
.color-swatch-grid.is-arranging .color-swatch-item:hover .color-swatch-detail,
.color-swatch-grid.is-arranging .color-swatch-item:focus-within .color-swatch-detail {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}

/* COLOR FAMILY TRAY

   A bare column, not the products index' .product-filters-tray: that box is built
   for the full facet stack and would dwarf one short list. */
.color-library-tray {
  padding: 0 16px;
}

.color-library-tray h1 {
  font-size: var(--font-size-4);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1em;
}

.color-family-filters {
  list-style: none;
}

.color-family-filter {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-4);
  line-height: 24px;
  /* A wrapped label would break the column of dots that makes the list scannable. */
  white-space: nowrap;
  text-align: left;
  cursor: pointer;
  transition: color var(--motion-duration-standard) var(--motion-ease-standard);
}

.color-family-filter:hover {
  color: var(--color-text-primary-hover);
}

.color-family-filter.active {
  color: var(--color-text-primary-active);
}

/* Round, because the family GIFs are square tiles of flat color. Fixed size so one
   slow or missing GIF cannot shunt its label out of the column.

   MaharamNeue sits high in its em box — the same reason .cta .label is nudged the
   other way — so centering on the line box leaves the dot reading low against the
   text. Transformed rather than offset, to keep it out of the flex measurement. */
.color-family-chip {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  margin-right: 6px;
  border-radius: 50%;
  transform: translateY(-2px);
}

/* "All Colors" has no GIF, so the outline is what makes an empty circle read as a
   swatch rather than as a gap. */
.color-family-chip.is-blank {
  border: 1px solid #666;
}