/************************
FILTER
************************/
.filter {
    display: flex;
    justify-content: space-between;
}
/* FILTER: Tag */
.filter-tag {
    border-radius: var(--border-radius);
    background: var(--background-900);
    position: relative;
    transition: var(--transition);
}
.dropdown--open.filter-tag {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.filter-tag__header {
    cursor: pointer;
    text-transform: capitalize;
}
.filter-tag__header:after {
    margin-left: var(--spacing-grid);
}
.filter-tag__body {
    background: var(--background-900);
    border-radius: var(--border-radius);
    border-top-left-radius: 0;
    padding: var(--spacing-m);
    display: grid;
    bottom: calc(-1 * var(--border-width));
    transform: translateY(100%);
    position: absolute;
    min-width: calc(100% + 3ch);
    z-index: 2;
}
.filter-tag__item {
    display: block;
    padding: var(--spacing-s) var(--spacing-m);
    border-radius: calc(var(--border-radius) * 0.75);
    font-weight: bold;
    color: var(--color-title);
    transition: var(--transition);
    cursor: pointer;
    text-transform: capitalize;
    white-space: nowrap;
}
.filter-tag__header:before {
    content: "\23";
    opacity: .5;
    margin-right: var(--spacing-s);
}
.filter-tag__item:before {
    content: "\23";
    width: 3ch;
    opacity: .5;
    transition: var(--transition);
}
.filter-tag__item--guide, .filter-tag__item--rules, .filter-tag__item--show-all {order: -1;}
.filter-tag__item--show-all:before, .filter-tag__header--show-all:before {content: "\f0b0";}
.filter-tag__item--guide:before, .filter-tag__header--guide:before {content: "\f1ea";}
.filter-tag__item--rules:before, .filter-tag__header--rules:before {content: "\f0e3";}
.filter-tag__item:hover {
    background: var(--background-700);
}
.filter-tag__item:hover:before {
    transform: rotate(-15deg);
    opacity: 1;
}
/* FILTER: Mode */
.filter-mode {
    border-radius: var(--border-radius);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--border-width);
}
.filter-mode .btn {
    background: var(--background-900);
    color: var(--color-title);
    cursor: pointer;
}
.filter-mode .btn i {
    font-size: 1rem;
    margin: 0;
}
.filter-mode .btn:not(.active) i {
    opacity: .5;
}
.filter-mode .btn:hover i {
    opacity: 1;
}
.filter-mode .btn:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.filter-mode .btn:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}