﻿
.sort-body {
    font-size: 0.9rem;
}
.sort-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

/* Chip button */
.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.05s;

    min-width:100%;
    background-color: var(--pico-secondary-hover-background);
    border-color: var(--pico-secondary-hover-border);
    color: var(--pico-secondary-inverse);
}

.chip input {
    display: none;
}

.chip span {
    white-space: nowrap;
    font-size: 0.9rem;
}


/* Active*/
.chip--active {
    background-color: var(--pico-primary-background);
    border-color: var(--pico-primary-border);
    color: var(--pico-primary-inverse);
}


.filters .bottom {
    display:flex;
        justify-content: space-between;
}

.filters button,
.filters role[button] { 
    padding: calc(var(--pico-form-element-spacing-vertical) * 0.8) var(--pico-form-element-spacing-horizontal);
    font-size: 0.9rem;
}

@media (min-width: 576px) {

    .sort-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}
