@ebay/skin/dist/toggle-button-group/toggle-button-group.css

Skin - CSS modules that represent the brand eBay

:root {
    --row-min-toggle-buttons-min: 2;
    --row-min-toggle-buttons-xs: 4;
    --row-min-toggle-buttons-sm: 5;
    --row-min-toggle-buttons-md: 8;
    --row-min-toggle-buttons-xl: 12;
    --row-list-toggle-buttons-min: 1;
    --row-list-toggle-buttons-xs: 1;
    --row-list-toggle-buttons-sm: 2;
    --row-list-toggle-buttons-md: 3;
    --row-list-toggle-buttons-xl: 5;
    --row-gallery-toggle-buttons-min: 2;
    --row-gallery-toggle-buttons-xs: 2;
    --row-gallery-toggle-buttons-sm: 3;
    --row-gallery-toggle-buttons-md: 4;
    --row-gallery-toggle-buttons-xl: 6;
}

.toggle-button-group {
    container: toggle-buttons-container/inline-size;
}

@supports not (contain: inline-size) {
    @media (max-width: 320px) {
        .toggle-button-group[data-columns-min="1"] ul {
            grid-template-columns: repeat(1, 1fr);
        }
        .toggle-button-group[data-columns-min="2"] ul {
            grid-template-columns: repeat(2, 1fr);
        }
        .toggle-button-group[data-columns-min="3"] ul {
            grid-template-columns: repeat(3, 1fr);
        }
    }
}
@container toggle-buttons-container (inline-size < 320px) {
    .toggle-button-group[data-columns-min="1"] ul {
        grid-template-columns: repeat(1, 1fr);
    }
    .toggle-button-group[data-columns-min="2"] ul {
        grid-template-columns: repeat(2, 1fr);
    }
    .toggle-button-group[data-columns-min="3"] ul {
        grid-template-columns: repeat(3, 1fr);
    }
}
.toggle-button-group ul {
    display: grid;
    gap: var(--spacing-100);
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(var(--row-min-toggle-buttons-min), 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.toggle-button-group li {
    display: inline-block;
    min-height: var(--toggle-button-height-min);
    width: 100%;
}

.toggle-button-group .toggle-button {
    height: 100%;
    margin: 0;
    max-width: 100%;
    width: 100%;
}
.toggle-button-group--list-layout ul {
    grid-template-columns: repeat(var(--row-list-toggle-buttons-min), 1fr);
}

.toggle-button-group--list-layout .toggle-button {
    justify-content: left;
    max-width: 100%;
    min-width: auto;
}

.toggle-button-group--gallery-layout ul {
    grid-template-columns: repeat(var(--row-gallery-toggle-buttons-min), 1fr);
}

.toggle-button-group--gallery-layout li {
    max-width: 100%;
}

.toggle-button-group--gallery-layout .toggle-button {
    flex-direction: column;
    max-width: 100%;
    min-width: auto;
}

.toggle-button-group--list-layout .toggle-button__content:not(:only-child),
.toggle-button-group--list-layout .toggle-button__image-container {
    align-self: flex-start;
}

.toggle-button-group--gallery-layout .toggle-button {
    justify-content: flex-start;
}

.toggle-button-group--gallery-layout .toggle-button__icon,
.toggle-button-group--gallery-layout .toggle-button__image {
    margin-bottom: 0;
    margin-right: 0;
}

.toggle-button-group--gallery-layout
    .toggle-button__icon
    ~ .toggle-button__content,
.toggle-button-group--gallery-layout
    .toggle-button__image-container
    ~ .toggle-button__content {
    align-self: flex-start;
}

.toggle-button-group--gallery-layout .toggle-button__icon,
.toggle-button-group--gallery-layout .toggle-button__image-container {
    margin-bottom: 0;
    margin-right: 0;
    text-align: left;
}

.toggle-button-group--gallery-layout .toggle-button__image-container {
    padding-bottom: 60%;
    position: relative;
    text-align: center;
    width: 100%;
}

.toggle-button-group--gallery-layout .toggle-button__image {
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}

.toggle-button-group--gallery-layout .toggle-button__image-container img {
    height: 100%;
    max-height: 200px;
    max-width: none;
}
@supports not (contain: inline-size) {
    @media (min-width: 320px) {
        .toggle-button-group ul {
            grid-template-columns: repeat(
                var(--row-min-toggle-buttons-xs),
                1fr
            );
        }
        .toggle-button-group--list-layout ul {
            grid-template-columns: repeat(
                var(--row-list-toggle-buttons-xs),
                1fr
            );
        }
        .toggle-button-group--gallery-layout ul {
            grid-template-columns: repeat(
                var(--row-gallery-toggle-buttons-xs),
                1fr
            );
        }
        .toggle-button-group[data-columns-xs="1"] ul {
            grid-template-columns: repeat(1, 1fr);
        }
        .toggle-button-group[data-columns-xs="2"] ul {
            grid-template-columns: repeat(2, 1fr);
        }
        .toggle-button-group[data-columns-xs="3"] ul {
            grid-template-columns: repeat(3, 1fr);
        }
        .toggle-button-group[data-columns-xs="4"] ul {
            grid-template-columns: repeat(4, 1fr);
        }
        .toggle-button-group[data-columns-xs="5"] ul {
            grid-template-columns: repeat(5, 1fr);
        }
        .toggle-button-group[data-columns-xs="6"] ul {
            grid-template-columns: repeat(6, 1fr);
        }
        .toggle-button-group[data-columns-xs="7"] ul {
            grid-template-columns: repeat(7, 1fr);
        }
        .toggle-button-group[data-columns-xs="8"] ul {
            grid-template-columns: repeat(8, 1fr);
        }
        .toggle-button-group[data-columns-xs="9"] ul {
            grid-template-columns: repeat(9, 1fr);
        }
        .toggle-button-group[data-columns-xs="10"] ul {
            grid-template-columns: repeat(10, 1fr);
        }
        .toggle-button-group[data-columns-xs="11"] ul {
            grid-template-columns: repeat(11, 1fr);
        }
        .toggle-button-group[data-columns-xs="12"] ul {
            grid-template-columns: repeat(12, 1fr);
        }
        .toggle-button-group[data-columns-xs="13"] ul {
            grid-template-columns: repeat(13, 1fr);
        }
        .toggle-button-group[data-columns-xs="14"] ul {
            grid-template-columns: repeat(14, 1fr);
        }
        .toggle-button-group[data-columns-xs="15"] ul {
            grid-template-columns: repeat(15, 1fr);
        }
        .toggle-button-group[data-columns-xs="16"] ul {
            grid-template-columns: repeat(16, 1fr);
        }
    }
    @media (min-width: 512px) {
        .toggle-button-group ul {
            grid-template-columns: repeat(
                var(--row-min-toggle-buttons-sm),
                1fr
            );
        }
        .toggle-button-group--list-layout ul {
            grid-template-columns: repeat(
                var(--row-list-toggle-buttons-sm),
                1fr
            );
        }
        .toggle-button-group--gallery-layout ul {
            grid-template-columns: repeat(
                var(--row-gallery-toggle-buttons-sm),
                1fr
            );
        }
        .toggle-button-group[data-columns-sm="1"] ul {
            grid-template-columns: repeat(1, 1fr);
        }
        .toggle-button-group[data-columns-sm="2"] ul {
            grid-template-columns: repeat(2, 1fr);
        }
        .toggle-button-group[data-columns-sm="3"] ul {
            grid-template-columns: repeat(3, 1fr);
        }
        .toggle-button-group[data-columns-sm="4"] ul {
            grid-template-columns: repeat(4, 1fr);
        }
        .toggle-button-group[data-columns-sm="5"] ul {
            grid-template-columns: repeat(5, 1fr);
        }
        .toggle-button-group[data-columns-sm="6"] ul {
            grid-template-columns: repeat(6, 1fr);
        }
        .toggle-button-group[data-columns-sm="7"] ul {
            grid-template-columns: repeat(7, 1fr);
        }
        .toggle-button-group[data-columns-sm="8"] ul {
            grid-template-columns: repeat(8, 1fr);
        }
        .toggle-button-group[data-columns-sm="9"] ul {
            grid-template-columns: repeat(9, 1fr);
        }
        .toggle-button-group[data-columns-sm="10"] ul {
            grid-template-columns: repeat(10, 1fr);
        }
        .toggle-button-group[data-columns-sm="11"] ul {
            grid-template-columns: repeat(11, 1fr);
        }
        .toggle-button-group[data-columns-sm="12"] ul {
            grid-template-columns: repeat(12, 1fr);
        }
        .toggle-button-group[data-columns-sm="13"] ul {
            grid-template-columns: repeat(13, 1fr);
        }
        .toggle-button-group[data-columns-sm="14"] ul {
            grid-template-columns: repeat(14, 1fr);
        }
        .toggle-button-group[data-columns-sm="15"] ul {
            grid-template-columns: repeat(15, 1fr);
        }
        .toggle-button-group[data-columns-sm="16"] ul {
            grid-template-columns: repeat(16, 1fr);
        }
    }
    @media (min-width: 768px) {
        .toggle-button-group ul {
            grid-template-columns: repeat(
                var(--row-min-toggle-buttons-md),
                1fr
            );
        }
        .toggle-button-group--list-layout ul {
            grid-template-columns: repeat(
                var(--row-list-toggle-buttons-md),
                1fr
            );
        }
        .toggle-button-group--gallery-layout ul {
            grid-template-columns: repeat(
                var(--row-gallery-toggle-buttons-md),
                1fr
            );
        }
        .toggle-button-group[data-columns-md="1"] ul {
            grid-template-columns: repeat(1, 1fr);
        }
        .toggle-button-group[data-columns-md="2"] ul {
            grid-template-columns: repeat(2, 1fr);
        }
        .toggle-button-group[data-columns-md="3"] ul {
            grid-template-columns: repeat(3, 1fr);
        }
        .toggle-button-group[data-columns-md="4"] ul {
            grid-template-columns: repeat(4, 1fr);
        }
        .toggle-button-group[data-columns-md="5"] ul {
            grid-template-columns: repeat(5, 1fr);
        }
        .toggle-button-group[data-columns-md="6"] ul {
            grid-template-columns: repeat(6, 1fr);
        }
        .toggle-button-group[data-columns-md="7"] ul {
            grid-template-columns: repeat(7, 1fr);
        }
        .toggle-button-group[data-columns-md="8"] ul {
            grid-template-columns: repeat(8, 1fr);
        }
        .toggle-button-group[data-columns-md="9"] ul {
            grid-template-columns: repeat(9, 1fr);
        }
        .toggle-button-group[data-columns-md="10"] ul {
            grid-template-columns: repeat(10, 1fr);
        }
        .toggle-button-group[data-columns-md="11"] ul {
            grid-template-columns: repeat(11, 1fr);
        }
        .toggle-button-group[data-columns-md="12"] ul {
            grid-template-columns: repeat(12, 1fr);
        }
        .toggle-button-group[data-columns-md="13"] ul {
            grid-template-columns: repeat(13, 1fr);
        }
        .toggle-button-group[data-columns-md="14"] ul {
            grid-template-columns: repeat(14, 1fr);
        }
        .toggle-button-group[data-columns-md="15"] ul {
            grid-template-columns: repeat(15, 1fr);
        }
        .toggle-button-group[data-columns-md="16"] ul {
            grid-template-columns: repeat(16, 1fr);
        }
    }
    @media (min-width: 1280px) {
        .toggle-button-group ul {
            grid-template-columns: repeat(
                var(--row-min-toggle-buttons-xl),
                1fr
            );
        }
        .toggle-button-group--list-layout ul {
            grid-template-columns: repeat(
                var(--row-list-toggle-buttons-xl),
                1fr
            );
        }
        .toggle-button-group--gallery-layout ul {
            grid-template-columns: repeat(
                var(--row-gallery-toggle-buttons-xl),
                1fr
            );
        }
        .toggle-button-group[data-columns-xl="1"] ul {
            grid-template-columns: repeat(1, 1fr);
        }
        .toggle-button-group[data-columns-xl="2"] ul {
            grid-template-columns: repeat(2, 1fr);
        }
        .toggle-button-group[data-columns-xl="3"] ul {
            grid-template-columns: repeat(3, 1fr);
        }
        .toggle-button-group[data-columns-xl="4"] ul {
            grid-template-columns: repeat(4, 1fr);
        }
        .toggle-button-group[data-columns-xl="5"] ul {
            grid-template-columns: repeat(5, 1fr);
        }
        .toggle-button-group[data-columns-xl="6"] ul {
            grid-template-columns: repeat(6, 1fr);
        }
        .toggle-button-group[data-columns-xl="7"] ul {
            grid-template-columns: repeat(7, 1fr);
        }
        .toggle-button-group[data-columns-xl="8"] ul {
            grid-template-columns: repeat(8, 1fr);
        }
        .toggle-button-group[data-columns-xl="9"] ul {
            grid-template-columns: repeat(9, 1fr);
        }
        .toggle-button-group[data-columns-xl="10"] ul {
            grid-template-columns: repeat(10, 1fr);
        }
        .toggle-button-group[data-columns-xl="11"] ul {
            grid-template-columns: repeat(11, 1fr);
        }
        .toggle-button-group[data-columns-xl="12"] ul {
            grid-template-columns: repeat(12, 1fr);
        }
        .toggle-button-group[data-columns-xl="13"] ul {
            grid-template-columns: repeat(13, 1fr);
        }
        .toggle-button-group[data-columns-xl="14"] ul {
            grid-template-columns: repeat(14, 1fr);
        }
        .toggle-button-group[data-columns-xl="15"] ul {
            grid-template-columns: repeat(15, 1fr);
        }
        .toggle-button-group[data-columns-xl="16"] ul {
            grid-template-columns: repeat(16, 1fr);
        }
    }
}
@container toggle-buttons-container (inline-size >= 320px) {
    .toggle-button-group ul {
        grid-template-columns: repeat(var(--row-min-toggle-buttons-xs), 1fr);
    }
    .toggle-button-group--list-layout ul {
        grid-template-columns: repeat(var(--row-list-toggle-buttons-xs), 1fr);
    }
    .toggle-button-group--gallery-layout ul {
        grid-template-columns: repeat(
            var(--row-gallery-toggle-buttons-xs),
            1fr
        );
    }
    .toggle-button-group[data-columns-xs="1"] ul {
        grid-template-columns: repeat(1, 1fr);
    }
    .toggle-button-group[data-columns-xs="2"] ul {
        grid-template-columns: repeat(2, 1fr);
    }
    .toggle-button-group[data-columns-xs="3"] ul {
        grid-template-columns: repeat(3, 1fr);
    }
    .toggle-button-group[data-columns-xs="4"] ul {
        grid-template-columns: repeat(4, 1fr);
    }
    .toggle-button-group[data-columns-xs="5"] ul {
        grid-template-columns: repeat(5, 1fr);
    }
    .toggle-button-group[data-columns-xs="6"] ul {
        grid-template-columns: repeat(6, 1fr);
    }
    .toggle-button-group[data-columns-xs="7"] ul {
        grid-template-columns: repeat(7, 1fr);
    }
    .toggle-button-group[data-columns-xs="8"] ul {
        grid-template-columns: repeat(8, 1fr);
    }
    .toggle-button-group[data-columns-xs="9"] ul {
        grid-template-columns: repeat(9, 1fr);
    }
    .toggle-button-group[data-columns-xs="10"] ul {
        grid-template-columns: repeat(10, 1fr);
    }
    .toggle-button-group[data-columns-xs="11"] ul {
        grid-template-columns: repeat(11, 1fr);
    }
    .toggle-button-group[data-columns-xs="12"] ul {
        grid-template-columns: repeat(12, 1fr);
    }
    .toggle-button-group[data-columns-xs="13"] ul {
        grid-template-columns: repeat(13, 1fr);
    }
    .toggle-button-group[data-columns-xs="14"] ul {
        grid-template-columns: repeat(14, 1fr);
    }
    .toggle-button-group[data-columns-xs="15"] ul {
        grid-template-columns: repeat(15, 1fr);
    }
    .toggle-button-group[data-columns-xs="16"] ul {
        grid-template-columns: repeat(16, 1fr);
    }
}
@container toggle-buttons-container (inline-size >= 512px) {
    .toggle-button-group ul {
        grid-template-columns: repeat(var(--row-min-toggle-buttons-sm), 1fr);
    }
    .toggle-button-group--list-layout ul {
        grid-template-columns: repeat(var(--row-list-toggle-buttons-sm), 1fr);
    }
    .toggle-button-group--gallery-layout ul {
        grid-template-columns: repeat(
            var(--row-gallery-toggle-buttons-sm),
            1fr
        );
    }
    .toggle-button-group[data-columns-sm="1"] ul {
        grid-template-columns: repeat(1, 1fr);
    }
    .toggle-button-group[data-columns-sm="2"] ul {
        grid-template-columns: repeat(2, 1fr);
    }
    .toggle-button-group[data-columns-sm="3"] ul {
        grid-template-columns: repeat(3, 1fr);
    }
    .toggle-button-group[data-columns-sm="4"] ul {
        grid-template-columns: repeat(4, 1fr);
    }
    .toggle-button-group[data-columns-sm="5"] ul {
        grid-template-columns: repeat(5, 1fr);
    }
    .toggle-button-group[data-columns-sm="6"] ul {
        grid-template-columns: repeat(6, 1fr);
    }
    .toggle-button-group[data-columns-sm="7"] ul {
        grid-template-columns: repeat(7, 1fr);
    }
    .toggle-button-group[data-columns-sm="8"] ul {
        grid-template-columns: repeat(8, 1fr);
    }
    .toggle-button-group[data-columns-sm="9"] ul {
        grid-template-columns: repeat(9, 1fr);
    }
    .toggle-button-group[data-columns-sm="10"] ul {
        grid-template-columns: repeat(10, 1fr);
    }
    .toggle-button-group[data-columns-sm="11"] ul {
        grid-template-columns: repeat(11, 1fr);
    }
    .toggle-button-group[data-columns-sm="12"] ul {
        grid-template-columns: repeat(12, 1fr);
    }
    .toggle-button-group[data-columns-sm="13"] ul {
        grid-template-columns: repeat(13, 1fr);
    }
    .toggle-button-group[data-columns-sm="14"] ul {
        grid-template-columns: repeat(14, 1fr);
    }
    .toggle-button-group[data-columns-sm="15"] ul {
        grid-template-columns: repeat(15, 1fr);
    }
    .toggle-button-group[data-columns-sm="16"] ul {
        grid-template-columns: repeat(16, 1fr);
    }
}
@container toggle-buttons-container (inline-size >= 768px) {
    .toggle-button-group ul {
        grid-template-columns: repeat(var(--row-min-toggle-buttons-md), 1fr);
    }
    .toggle-button-group--list-layout ul {
        grid-template-columns: repeat(var(--row-list-toggle-buttons-md), 1fr);
    }
    .toggle-button-group--gallery-layout ul {
        grid-template-columns: repeat(
            var(--row-gallery-toggle-buttons-md),
            1fr
        );
    }
    .toggle-button-group[data-columns-md="1"] ul {
        grid-template-columns: repeat(1, 1fr);
    }
    .toggle-button-group[data-columns-md="2"] ul {
        grid-template-columns: repeat(2, 1fr);
    }
    .toggle-button-group[data-columns-md="3"] ul {
        grid-template-columns: repeat(3, 1fr);
    }
    .toggle-button-group[data-columns-md="4"] ul {
        grid-template-columns: repeat(4, 1fr);
    }
    .toggle-button-group[data-columns-md="5"] ul {
        grid-template-columns: repeat(5, 1fr);
    }
    .toggle-button-group[data-columns-md="6"] ul {
        grid-template-columns: repeat(6, 1fr);
    }
    .toggle-button-group[data-columns-md="7"] ul {
        grid-template-columns: repeat(7, 1fr);
    }
    .toggle-button-group[data-columns-md="8"] ul {
        grid-template-columns: repeat(8, 1fr);
    }
    .toggle-button-group[data-columns-md="9"] ul {
        grid-template-columns: repeat(9, 1fr);
    }
    .toggle-button-group[data-columns-md="10"] ul {
        grid-template-columns: repeat(10, 1fr);
    }
    .toggle-button-group[data-columns-md="11"] ul {
        grid-template-columns: repeat(11, 1fr);
    }
    .toggle-button-group[data-columns-md="12"] ul {
        grid-template-columns: repeat(12, 1fr);
    }
    .toggle-button-group[data-columns-md="13"] ul {
        grid-template-columns: repeat(13, 1fr);
    }
    .toggle-button-group[data-columns-md="14"] ul {
        grid-template-columns: repeat(14, 1fr);
    }
    .toggle-button-group[data-columns-md="15"] ul {
        grid-template-columns: repeat(15, 1fr);
    }
    .toggle-button-group[data-columns-md="16"] ul {
        grid-template-columns: repeat(16, 1fr);
    }
}
@container toggle-buttons-container (inline-size >= 1280px) {
    .toggle-button-group ul {
        grid-template-columns: repeat(var(--row-min-toggle-buttons-xl), 1fr);
    }
    .toggle-button-group--list-layout ul {
        grid-template-columns: repeat(var(--row-list-toggle-buttons-xl), 1fr);
    }
    .toggle-button-group--gallery-layout ul {
        grid-template-columns: repeat(
            var(--row-gallery-toggle-buttons-xl),
            1fr
        );
    }
    .toggle-button-group[data-columns-xl="1"] ul {
        grid-template-columns: repeat(1, 1fr);
    }
    .toggle-button-group[data-columns-xl="2"] ul {
        grid-template-columns: repeat(2, 1fr);
    }
    .toggle-button-group[data-columns-xl="3"] ul {
        grid-template-columns: repeat(3, 1fr);
    }
    .toggle-button-group[data-columns-xl="4"] ul {
        grid-template-columns: repeat(4, 1fr);
    }
    .toggle-button-group[data-columns-xl="5"] ul {
        grid-template-columns: repeat(5, 1fr);
    }
    .toggle-button-group[data-columns-xl="6"] ul {
        grid-template-columns: repeat(6, 1fr);
    }
    .toggle-button-group[data-columns-xl="7"] ul {
        grid-template-columns: repeat(7, 1fr);
    }
    .toggle-button-group[data-columns-xl="8"] ul {
        grid-template-columns: repeat(8, 1fr);
    }
    .toggle-button-group[data-columns-xl="9"] ul {
        grid-template-columns: repeat(9, 1fr);
    }
    .toggle-button-group[data-columns-xl="10"] ul {
        grid-template-columns: repeat(10, 1fr);
    }
    .toggle-button-group[data-columns-xl="11"] ul {
        grid-template-columns: repeat(11, 1fr);
    }
    .toggle-button-group[data-columns-xl="12"] ul {
        grid-template-columns: repeat(12, 1fr);
    }
    .toggle-button-group[data-columns-xl="13"] ul {
        grid-template-columns: repeat(13, 1fr);
    }
    .toggle-button-group[data-columns-xl="14"] ul {
        grid-template-columns: repeat(14, 1fr);
    }
    .toggle-button-group[data-columns-xl="15"] ul {
        grid-template-columns: repeat(15, 1fr);
    }
    .toggle-button-group[data-columns-xl="16"] ul {
        grid-template-columns: repeat(16, 1fr);
    }
}