@playerHeight:          10rem;

#player {
    position:           fixed;
    left:               0;
    right:              0;
    top:                0;
    height:             @playerHeight;
    padding:            0 1rem;
    //border-bottom:      0.1rem solid @gray;
    background-color:   @black; //@charcoal;

    > p {
        line-height:    2rem;
    }

    > .info {
        margin:         1rem 0 0;
        height:         4rem;
        overflow-y:     hidden;
    }

    > .control {
        margin:         0;
        text-align:     center;
        > .play {
            padding:    0.8rem 2.9rem;
        }
    }
}

#explorer {

    //margin-top:         @playerHeight;
    position:           fixed;
    left:               0;
    right:              0;
    top:                @playerHeight;
    bottom:             0;
    height:             auto;

    > li {
        > .tabpanel {

            background-color:   @charcoal;
        }
        > .app-loading {
            background-image:       url(/static/img/app-loading.svg);
            background-position:    50% 50%;
            background-repeat:      no-repeat;
            background-size:        auto 60%;
        }
    }
}

#search-form {

    padding:            1rem;
    border-bottom:      0.1rem solid @border;

    label {
        display:        block;
        > input,
        > select {
            box-sizing:         border-box;
            -moz-box-sizing:    border-box;
            width:              100%;
        }
    }
};

.station-list {
    .nolist();
    padding:            0.3rem 0 0;

    > li {
        padding:        1rem;
        min-height:     4rem;
        overflow:       hidden;
        border-bottom:  0.1rem solid @border;
    }
    > .error,
    > .warning,
    > .info {
        text-align:     center;
    }
    > .station {
        padding:        1rem;
        min-height:     4rem;
        overflow:       hidden;
        border-bottom:  0.1rem solid @border;

        &.playing {
            background-color:   @darkblue;
        }

        > .buttons {
            float:      right;
            text-align: right;
        }
        > .info {
            margin:     0 10rem 0 0;
            > .name {
                display:        block;
                font-weight:    bold;
            }
            > .description {
                font-weight:    normal;
                font-size:      1.2rem;
                color:          @gray;
            }
            > .genre {
                font-weight:    normal;
                font-size:      1.2rem;
                color:          @gray;
            }
        }

        &.unsupported {
            display:        none;
            > .buttons {
                display:    none;
            }
            > .info {
                margin:     0;
                font-style: italic;
                color:      @charcoal;
            }
        }
    }
}

