@import 'common/vars';
@import 'common/mixins';
@import 'common/layout';

$host-border: $default-border-2;
$host-shadow: $default-shadow;

.music-snapcast-container {
    .host {
        width: 95%;
        margin: 2rem auto;
        border: $host-border;
        border-radius: 1rem;
        box-shadow: $host-shadow;

        .head {
            padding: 1rem .5rem;
            background: $default-bg-4;
            border-bottom: $host-border;
            border-radius: 1rem 1rem 0 0;
            display: flex;
            align-items: center;

            .name {
                padding-left: .5rem;
                text-transform: uppercase;

                &:hover {
                    color: $default-hover-fg;
                    cursor: pointer;
                }
            }

            button {
                padding: 0;
                border: 0;
                &:hover { color: $default-hover-fg; }
            }
        }

        .group {
            .head {
                background: $default-bg-5;
                border-radius: 0;
            }

            .head,
            .client {
                padding: 0 1rem;
            }

            .client {
                display: flex;
                align-items: center;

                &.offline { color: $default-fg-3; }
                &:hover { background: $hover-bg; }

                .name {
                    &:hover {
                        color: $default-hover-fg;
                        cursor: pointer;
                    }
                }
            }
        }

        .icon { margin-right: 1rem; }
    }

    .modal {
        .info {
            padding: 2rem;

            .section {
                border: $default-border-2;
                border-radius: 1rem;
                &:not(last-child) { margin-bottom: 2rem; }

                .title {
                    border-bottom: $default-border-2;
                    padding: 1rem;
                    text-transform: uppercase;
                }

                &.clients .row {
                    padding: .5rem;

                    label {
                        margin: 0 0 0 .5rem;
                    }
                }
            }

            .row {
                padding: .33rem .5rem;
                border-radius: .75rem;
                display: flex;
                align-items: center;

                &:nth-child(odd) { background: rgba(255, 255, 255, 0.0); }
                &:nth-child(even) { background: $default-bg-3; }
                &:hover { background: $hover-bg; }

                .label { font-weight: bold; }
                .value { text-align: right; }
            }
        }
    }
}

#music-snapcast-client-info {
    .info {
        .buttons {
            background: initial;
            margin-top: 1.5rem;
            padding-top: 1.5rem;
            border-top: $default-border-2;
            display: flex;
            justify-content: center;

            button {
                color: #900;
                border-color: #900;
            }
        }
    }
}

@media #{map-get($widths, 's')} {
    .music-snapcast-container {
        .modal {
            width: 80vw;
        }
    }
}

@media #{map-get($widths, 'm')} {
    .music-snapcast-container {
        .modal {
            width: 70vw;
        }
    }
}

@media #{map-get($widths, 'l')} {
    .music-snapcast-container {
        .modal {
            width: 45vw;
        }
    }
}

