.userlist {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow: hidden;
    padding: 2px;

    &__item {
        margin: 2px;
        width: 300px;
        display: flex;
    }

    &__container {
        padding: 5px;
        margin: 2px 0;
    }

    &__navigation {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;

        @media (max-width: @site-mobile-width) {
            flex-direction: column;
        }
    }

    &__pagination {
        max-width: 500px;
        flex: 1 1 auto;
        display: flex;
        align-items: stretch;
        justify-content: space-between;

        @media (max-width: @site-mobile-width) {
            max-width: 100%;
            flex-grow: 0;
            margin-top: 5px;
        }
    }

    &__sorting {
        flex: 0 0 auto;
        display: flex;
        align-items: stretch;

        @media (max-width: @site-mobile-width) {
            flex-direction: column;
        }
    }

    &__select {
        margin: 0 2px;
        background: inherit;
        box-shadow: initial;
        border-width: 0;
        border-radius: 0;
        background: @background-colour-translucent-9;
        color: @text-colour;
        background: var(--background-colour-translucent-9);
        color: var(--text-colour);

        @media (max-width: @site-mobile-width) {
            &:not(:first-child) {
                margin-top: 5px;
            }
        }
    }
}