@use '@angular/material' as mat;

.mat-list-base {
    padding-top: 0;
}

.scroll-viewport {
    min-height: calc(100vh - 159px);
}

.search-panel {
    padding: 10px 0 0 0;
    display: flex;
    justify-content: center;
}

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

mat-nav-list {
    overflow: scroll;
}

#all-channels {
    overflow: hidden;
    max-height: calc(100vh - 167px);
}

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

    div[matformfieldlineripple], .mat-mdc-form-field-subscript-wrapper {
        display: none;
    }

    .mat-expansion-panel-body {
        padding: 0 !important;
    }

    .mat-expansion-panel {
        border-radius: 0 !important;
    }

    .mat-mdc-tab.mdc-tab {
        padding: 0 5px;
    }
}

[type='search']::-webkit-search-cancel-button {
    -webkit-appearance: none;
    cursor: pointer;
    appearance: none;
    height: 10px;
    width: 10px;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5NiA5NiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTYgOTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBvbHlnb24gZmlsbD0iI2VlZSIgcG9pbnRzPSI5NiwxNCA4MiwwIDQ4LDM0IDE0LDAgMCwxNCAzNCw0OCAwLDgyIDE0LDk2IDQ4LDYyIDgyLDk2IDk2LDgyIDYyLDQ4ICIvPg0KPC9zdmc+DQo=');
    background-size: 10px 10px;
    color: #fff;
}

#groups-list,
#favorites-list {
    height: calc(100vh - 105px);
}

@media only screen and (max-width: 599px) {
    .channel-name {
        max-width: 100px;
    }

    .tab-title {
        display: none;
    }

    .tab-icon {
        display: block;
    }

    .scroll-viewport {
        min-height: calc(50vh - 159px);
    }
}
