@import "colors";
@import "../../../node_modules/lineupjs/build/LineUpJS.css";


.lineup_container {
    height: 100vh;
    padding: 1em 0 0 1em;
    box-sizing: border-box;

    header {
        padding: 0;
    }

    #lineup {
        height: 100%;
    }
}

.action_container {
    text-align: center;
    background-color: blue;
}

.thumbnail-container {
    width: 100%;
    height: 100%;
    background: #f3f4f5;  /* fixme: make dynamic */
    pointer-events: none;
    display: flex;
    flex-flow: row wrap;

    img.thumbnail {
        width: initial;
        height: initial;
        margin: auto;
        flex: auto;
    }
}

.icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    span {
        color: grey;
        cursor: pointer;
        padding: 2px;
    }
    .button:hover {
        color: $color-primary-light;
    }
}
