/*
|--------------------------------------------------------------------------
| View - Playlists
|--------------------------------------------------------------------------
*/

.view.view-playlists {
    display: flex;

    .playlists-nav {
        width: 240px;
        border-right: 1px solid #d2d2d2;
        background-color: $generic-lightgrey;
        max-height: 100%;
        overflow: hidden;
        position: relative;

        .playlists-nav-body {
            max-height: 100%;
            overflow: auto;

            .playlist-nav-item {

                &:first-child {

                    a {
                        border-width: 0 0 1px 0;

                        &.active {
                            border-width: 0 0 1px 0;
                        }
                    }

                    input[type="text"] {
                        border-width: 0 0 1px 0;
                    }
                }

                a {
                    display: block;
                    color: inherit;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    cursor: pointer;
                    padding: 12px 15px;
                    text-decoration: none;
                    border-style: solid;
                    border-color: transparent;
                    border-width: 1px 0;

                    &:hover {
                        background-color: #e6e6e6;
                    }

                    &.active {
                        border-style: solid;
                        border-color: #d2d2d2;
                        border-width: 1px 0;
                        background-color: #e6e6e6;
                        color: $main-color;
                    }
                }

                input[type="text"] {
                    display: block;
                    width: 100%;
                    background-color: $generic-white;
                    color: $main-color;
                    padding: 12px 15px;
                    outline: none;
                    border-style: solid;
                    border-color: #d2d2d2;
                    border-width: 1px 0;
                }
            }
        }

        .playlists-nav-footer {
            position: absolute;
            bottom: 0;

            .playlists-management {
                margin: 10px;
                border: solid 1px #CCC;

                button {
                    text-align: center;
                    color: #555;
                    width: 22px;
                    text-align: center;

                    .fa {
                        margin-right: 0;
                    }
                }
            }
        }
    }

    .playlist {
        width: calc(100% - 240px);

        .tracks-list-header {
            width: calc(100% - 242px); // HACK
        }
    }
}
