@import "./_variables.scss";

.a2z-search {
    .letters .btn {
        padding: 0px 5px;
    }
}
.search-bar {
    @include display-flex;
    background-color: $primary-blue;
    margin-left: -$body-padding-x;
    margin-right: -$body-padding-x;
    padding-left: $body-padding-x;
    padding-right: $body-padding-x;


    .search {
        @include flex(5);
        @include display-flex;
        @include flex-direction(column);
        @include align-items(center);
        .query-list {
            @include flex(12);
            @include flexbox((
                display: flex,
                flex-direction: column
            ));
            flex: -moz-available;
            @include justify-content(space-between);
        }
        .after1{
            @include flex(1);
            vertical-align: middle;
        }
        .after, .before {
            @include flex(1);
            vertical-align: top;
        }
        .query {
            @include flex(4);
            @include flexbox((
                display: flex,
                flex-direction: row
            ));
            @include flex-wrap(wrap);
            margin-bottom: 10px;
            .action {
                @include flex(1);
                @include display-flex;
                @include justify-content(flex-end);
            }
        }

        .search-input {
            @include flex-basis(50px);
        }

        .buttons {
            @include align-self(end);
            @include display-flex;
            @include justify-content(flex-start);
            @include align-items(flex-start);
            @include flex-direction(column);
            @include flex(4);
            @include flex-basis(2rem);
            margin-left: 20px;


            button {
                color: #fff !important;
            }
        }

        .metadore-field-selector {
            display: flex;
            flex-direction: row;
            align-items: center;
            color: white;
            padding-top: 10px;
            input[type="checkbox"] {
                opacity: 0;
                width: 1px;
                height: 1px;
            }
              
            input[type="checkbox"] + label {
                transition: all 500ms ease;
                cursor: pointer;
                padding: 5px 20px;
                margin: 0 0 0 5px;  
                border-radius: 5px;
                border: 1px solid #e0e0e0;
                color: white;
                font-weight: 100;
            }
            
            input[type="checkbox"]:checked + label {
                background-color: white;
                color: #0050a0;
            }
            
        }
    }
}