.catalog-view {
    display: flex;
    align-items: center;
}

.catalog-view__title {
    margin-right: 1rem;
    font-weight: 400;
    color: rgba(var(--color__dark-rgb), 0.56);
}

/* catalog-view-list */
.catalog-view-list {
    display: flex;
    align-items: center;
    padding: 0.3125rem;
    border-radius: .75rem;
    background-color: var(--color__fill-4);
    flex-wrap: nowrap;
}

.catalog-view-list__item {}

.catalog-view__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 2.375rem;
    padding: 0;
    border: 0;
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.6875rem rgba(var(--color__text-1-rgb), 0.08);
    transition: background-color ease 0.24s;
    cursor: pointer;
    filter: grayscale(1);
}

.catalog-view__button:hover {
    background-color: rgba(var(--color__white-rgb), 0.1);
}

.catalog-view__button.--active {
    background-color: var(--color__white);
    filter: grayscale(0);
    box-shadow: 0px 2px .75rem rgba(0, 0, 0, 0.08);
}

.catalog-view__button svg {
    display: block;
    width: 1.3125rem;
    height: 1.3125rem;
    opacity: 0.2;
    transition: opacity ease 0.24s;
}

.catalog-view__button.--active svg {
    opacity: 1;
}

@media screen and (max-width: 991px) {
    .catalog-view {
        flex-shrink: 2;
        height: 100%;
    }

    .catalog-view__title {
        display: none;
    }

    .catalog-view-list {
        height: 2.61538rem;
        gap: .31rem;
        /* width: 5.84615rem; */
        border-radius: .62rem;
        padding: .31rem !important;
    }

    .catalog-view__button {
        width: 1.875rem;
        height: 1.75rem;
    }

    .catalog-view__button svg {
        width: 1rem;
        height: 1rem;
    }
}