/** @define FactModuleFilter */

.FactModuleFilter {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    margin-bottom: 2.8rem;

    .btn, .btn-default {
        margin-right: 20px;
        width: 10rem;
    }

    &-module {

        background-color: @enabled-item-background;
        border-color: @default-icon-hov;
        color: @default-interface-txt;

        @media screen and (max-width: 750px) {
            flex-basis: 50%;
        }
        &:active, &:focus {
            // copied from bootstrap's .btn:focus
            background-color: @default-icon-hov;
            border-color: @enabled-item-border;
            color: @enabled-item-text;
            box-shadow: none;
            z-index: 2;
        }

        &:hover {
            border-color: @default-icon-hov;
        }
    }

    &-module.is-active {
        cursor: default;

        z-index: 2;

        background-color: @default-icon;
        color: @default-bg;
        border-color: @default-icon;

        &:active, &:focus {
            box-shadow: none;
        }

        &:hover {
            background-color: @default-interface-txt;
        }
    }
}
