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

#wrapper {
    display: flex;
    flex-direction: column;

    background: $primary-dark;
    color: $grey-light;
    height: 100%;
}

.helper-text {
    padding: $spacer;
    text-align: center;
    opacity: 0.8;
}

.genes-found,
.genes-selected,
.clear-button {
    padding: $spacer;
}

.genes-filter,
.clear-button,
.copy-button {
    padding: $spacer / 2 $spacer;

    .el-button {
        width: 100%;
    }
}

.genes-pagination{
    padding: $spacer / 2 $spacer;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.badge {
    border-radius: 10px;
    padding: 0 0.3em;
    float: right;
    text-align: center;
    min-width: 20px;
}

.genes-found  {
    .badge {
        background-color: $primary-light;
    }
}

.genes-selected {
    .badge {
        background-color: $secondary-dark;
    }
}

.genes-list {
    overflow: auto;
    ul {
        list-style-type: none;
        padding: 0;
    }
}

.gene-item {
    cursor: pointer;

    .gene-item-label {
        height: 100%;
        padding: $spacer;
    }

    .gene-hover,
    .gene-item-label:hover {
        background-color: $secondary;
        color: $primary-dark;
    }

    i {
        float: right;
    }

    .gene-item-list {
        list-style-type: none;

        li a,
        li > span {
            @extend %link;
            display: block;
            padding: $spacer / 1.5;
            padding-left: $spacer * 2;
        }
    }
}
