@import '~@angular/material/theming';

@import '../../../theme.scss';

// Define a custom mixin that takes in the current theme
@mixin custom-style($theme) {
    // Parse the theme and create variables for each color in the pallete
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $warn: map-get($theme, warn);
    $foreground: map-get($theme, foreground);
    $background: map-get($theme, background);
    // Create theme specfic styles

    .repos{
        width: 100%;
        flex: 0.1 0 auto;
        display: inline-block;
        text-align: left;
        height: 100%;
    }

    .custom-sub-header{
        display:flex;
        padding: 0 0px;
    }
    .mat-list-base .mat-subheader:first-child{
        background-color:  mat-color($primary, default-contrast);
    }

    // .repository-name{
    //     color:  mat-color($primary, default);
    // }
  }
  
  @include custom-style($my-theme);

.repos-outer{
    width: 100%;
    top: 72px;
    bottom: 64px;
    left: 0;
    right: 0;
    padding-top: 1em; 
    padding-bottom: 1em; 
    text-align: center;
    display: flex;
    justify-content: center;
}
.mat-list-item-content{
    cursor: pointer
}
.items{
    overflow-y: scroll;
    height: 100%;
}
.mat-nav-list{
    overflow-y: hidden;
    height: 100%;
    flex-direction: column;
    display: flex;
}

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

.filter{
    // flex: 1;
}

.mat-form-field{
    width: 8em;
}
.progress-box{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
::ng-deep .mat-form-field-infix{
    width: 100% !important; 
}
.repository-name{
    margin: 0px;
    font-weight: unset;
    font-size: 1.5em;
}

.repo-info{
    display: flex;
    align-items: flex-end;
    font-size: 0.75em;
    color: #000000;
    margin-right: 1em;
}

.repo-info mat-icon{
    width:unset;
    height: unset;
    font-size: 1.2em;
}

.repository-name-box{
    padding-bottom: 0.6em;
    display: flex;
}

.item{
    border-top: 1px #ecebeb solid;
}

.left-icon > mat-icon > a{
    padding: 0.2em;
}

.pageview > a:hover{
    background-color: #f0f0f0;
    border-radius: 2em;
}

.bookmark:hover{
    background-color: #d4d2d2;
    padding: 0.1em;
    border-radius: 2em;
}

.bookmark{
    padding: 0.1em;
}

.spinner-box{
    margin-right: 0.5em;
}

.repo-link{
    padding-bottom: 0.8em;
    padding-top: 0.3em;
}

.repo-link:hover{
    background-color: #f0f0f0;
}


.repo-link:hover .repository-name{
    text-decoration: underline;
}

.spacer{
    flex:1;
}

.repo-label{
    display: flex;
    align-items: center;
    font-size: 1.2em;
}

.bookmark-box{
    margin-right: 0.5em;
}

.bookmark-box > mat-icon{
    font-size: 1.6em;
    width: unset;
    height: unset;
}

.filter mat-form-field + mat-form-field{
    margin-left: 8px;

}

.logo-img{
    width: 1em;
    border-radius: 0.2em;
}