.view-switcher {
    @include media-breakpoint-up(md) {
        flex-wrap: wrap;
    }

    font-size:1.4rem;
    display: flex;
    font-weight: 500;
    list-style: none;
    margin: 3.6rem -1rem 0;
    overflow: auto;
    padding: 0 1rem;

    li {
        @include media-breakpoint-up(md) {
            margin-right: 2.4rem;
        }

        display: inline-block;
        margin-right: 2rem;
        margin-bottom: 0.6em;
        white-space: nowrap;

        .link {
            border-bottom: none;
        }

        &:last-child {
            margin-right: 0;
        }
    }

    button {
        background: none;
        border: none;
        cursor: pointer;
        height: auto !important;
        font-size: inherit !important;
        padding: 0 !important;
    }

    a,
    .link,
    .linkReplacement,
    button {
        border-bottom: 1px solid transparent;
        color: var(--link-color);
        cursor: pointer;
        font-weight: inherit;

        &:hover {
            background: var(--link-hover-background);
            color: var(--link-hover-color);
        }
    }

    .view-switcher__item--selected {
        font-weight: bold;

        a,
        .link,
        .linkReplacement,
        button {
            border-bottom: 2px solid var(--default-color);
            color: var(--default-color);
            cursor: default;

            &:hover {
                background: transparent;
            }
        }
    }
}

.view-switcher__counter {
    align-items: center;
    background: #f7f7f8;
    border-radius: 0.8rem;
    display: inline-flex;
    font-size: 1.2rem;
    font-weight: bold;
    height: 2.2rem;
    justify-content: center;
    line-height: 2.2rem;
    margin-left: 0.4rem;
    min-width: 2.2rem;
    padding: 0 0.6rem;
    text-align: center;

    .view-switcher__item--selected & {
        background: var(--background-color-invert);
        color: var(--default-color-invert);
    }
}

.view-switcher__search {
    @include media-breakpoint-up(sm) {
        flex: 1;
        margin-left: 2em;
    }

    flex: 1 100%;
    text-align: right;
    white-space: nowrap;

    .icon {
        display: inline-block;
        margin-right: 0.2em;
        vertical-align: middle;
    }

    a:hover {
        .icon {
            filter: invert(1);
        }
    }
}