/*
 * Swatch list (Tts\Ui\SwatchList\SwatchList): a product's colours, each a
 * link to its page. Compact - square photos in a wrapping row, the current
 * one ringed - for choosing; detailed - photo, name and price in a list - for
 * the way on when the current colour cannot be had. Decision 23.
 */

.swatch-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.swatch-list--compact {
    display: flex;
    flex-wrap: wrap;
    gap: var(--shop-space-2);
}

.swatch-list__item {
    display: block;
    border-radius: var(--shop-radius-sm);
    color: inherit;
    text-decoration: none;
}

.swatch-list--compact .swatch-list__item {
    width: var(--shop-tap);
    height: var(--shop-tap);
    padding: 2px;
    border: 1px solid var(--shop-border);
}

.swatch-list--compact a.swatch-list__item:hover {
    border-color: var(--shop-accent);
}

.swatch-list--compact .swatch-list__item[aria-current] {
    border: 2px solid var(--shop-ink);
    padding: 1px;
}

.swatch-list__image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: calc(var(--shop-radius-sm) - 3px);
    object-fit: cover;
}

.swatch-list__image--empty {
    display: grid;
    place-items: center;
    background: var(--shop-surface-subtle);
    color: var(--shop-text);
    font-size: var(--shop-text-md);
    font-weight: var(--shop-weight-bold);
}

.swatch-list--detailed {
    display: grid;
    gap: var(--shop-space-2);
}

.swatch-list--detailed .swatch-list__item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: var(--shop-space-3);
    padding: var(--shop-space-2);
    border: 1px solid var(--shop-border);
}

.swatch-list--detailed a.swatch-list__item:hover {
    border-color: var(--shop-accent);
}

.swatch-list--detailed .swatch-list__image {
    width: 56px;
    height: 56px;
}

.swatch-list__text {
    display: grid;
    gap: 2px;
}

.swatch-list__name {
    color: var(--shop-ink);
    font-size: var(--shop-text-md);
    font-weight: var(--shop-weight-semibold);
    line-height: var(--shop-leading-snug);
}

a.swatch-list__item:hover .swatch-list__name {
    color: var(--shop-accent);
}

.swatch-list__meta {
    color: var(--shop-text-soft);
    font-size: var(--shop-text-sm);
    line-height: var(--shop-leading-snug);
}