.filter {

    @include flex;
    @include align-items(center);
    @include flex-just(flex-end);

    &-holder {
        position: relative;

        .button {
            display: none;
            margin-left: 1rem;

            @include sm-screen {

                @include inline-flex;
            }
        }

        @include md-screen {

            .close-bar {
                display: none;
            }

            select {
                margin-left: 0.5rem;
                max-width: 8rem;

                @include truncate;
            }

            // WooCommerce filters

            .woocommerce-ordering {

                @include inline-flex;

                &:nth-of-type(1) {

                    select {
                        max-width: 8.75rem;
                    }
                }

                &:nth-of-type(2) {

                    select {
                        max-width: 10rem;
                    }
                }
            }

            .result {
                // override standard WooCommerce styles
                white-space: nowrap;

                + select,
                + .woocommerce-ordering select {
                    margin-left: 1.5rem;
                }
            }
        }
    }

    // Blog filters

    @include md-screen {

        > select {

            &:nth-of-type(1) {
                min-width: 7.25rem;
            }

            &:nth-of-type(2) {
                max-width: 4.75rem;
            }

            &:nth-of-type(3) {
                max-width: 6rem;
            }
        }
    }

    @include sm-screen {

        display: block;

        .result {

            p {
                margin: 0;
            }
        }
    }
}