@import "../../styles/theme";

.wrapper {
    height: 100%;
}

.search-card {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid $grey;
}

.card-content {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-gap: $spacer;
    grid-template-areas:
        "intro-text  intro-text"
        "genes-lists quality"
        "genes-input allele-frequency"
        "genes-input exact-match"
        "genes-input orthologs"
        "buttons     buttons";
}

.intro-text {
    grid-area: intro-text;

    .intro-text-p {
        color: $black-light;
        font-family: $text-font;
        font-size: 14px;
        line-height: 1.5;
    }
}

.genes-lists {
    grid-area: genes-lists;
}

.genes-input {
    grid-area: genes-input;
}

.exact-match {
    grid-area: exact-match;
}

.orthologs {
    grid-area: orthologs;
}

.quality {
    grid-area: quality;
}

.allele-frequency {
    grid-area: allele-frequency;
}

.buttons {
    grid-area: buttons;
}
