@use '@angular/material' as mat;

:host {
    width: 100%;
}

.itv-container {
    display: grid;
    grid-template-columns: 330px 1fr 1fr;
    grid-template-rows: 50% 50%;
    gap: 0 0;
    grid-auto-flow: row;
    grid-template-areas:
        'sidebar video-player video-player'
        'sidebar epg epg';
    height: 100%;
}

.itv-container-epg {
    display: grid;
    grid-template-columns: 330px 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 0 0;
    grid-auto-flow: row;
    grid-template-areas:
        'sidebar epg epg'
        'sidebar epg epg'
        'sidebar epg epg';
    height: 100%;
}

.sidebar { grid-area: sidebar; }

.video-player { grid-area: video-player; }

.epg { grid-area: epg; }

.search-panel {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    margin-bottom: -15px;
}

.search-bar {
    width: 90%;
    @include mat.form-field-density(-5);
}

.epg-content {
    height: calc(50vh - 20px);
    overflow-y: auto;
    border-right: #111 1px solid;
    padding-bottom: 20px; 
}

.sidebar-content {
    height: 100%;
    overflow-y: auto;
    border-right: #111 1px solid;
    overflow-x: hidden;
}

.no-channel-selected {
    margin: 10px;
}

mat-list-option {
    width: 320px;
}

::ng-deep {
    .search-bar {
        div {
            border-radius: 20px;
        }
    }
}
