@import '../../styles/variables.less';


app-navigator {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    & div.no-content-actions {
        position: relative;
        display: block;
        width: 100%;
        overflow: hidden;
        & div.collection-actions{
            border-top: thin solid var(--scheme-color-4);
            & p.warning {
                padding: 6px 12px;
                color: var(--scheme-color-0);
                overflow: hidden;
            }
        }
    }
    & div.collection-title {
        position: sticky;
        top:0;
        z-index: 1;
        height: 0;
        width: 100%;
        & span.title {
            position: absolute;
            right: 12px;
            font-size: 11px;
            background: var(--scheme-color-4);
            color: var(--scheme-color-0);
            z-index: 1;
            padding: 3px 6px;
            min-width: 78px;
        }
        & span.divider {
            position: absolute;
            left:12px;
            right: 12px;
            height: 1px;
            border-top: thin solid var(--scheme-color-4);
            z-index: 1;
        }
    
    }
    & div.controlls {
        padding-bottom: 12px;
        text-align: center;
        & button {
            color: var(--scheme-color-0);
        }
    }
    & p.info {
        padding: 3px 12px;
        color: var(--scheme-color-1);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    & p.sub-info {
        padding: 3px 12px 3px 24px;
        color: var(--scheme-color-2);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    & div.filter {
        height: 41px;
        width: 100%;
        background: var(--scheme-color-5);
        overflow: hidden;
    }
    & div.actions {
        position: relative;
        width: auto;
        overflow-y: auto;
        overflow-x: hidden;
        max-height: 450px;
    }
    & div.action {
        position: relative;
        padding: 6px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        &:hover {
            background: var(--scheme-color-hover);
            &::before {
                background: var(--scheme-color-hover);
            }
        }
        &.selected,
        &.selected:hover {
            background: var(--scheme-color-accent-50);
            &::before {
                background: var(--scheme-color-accent-50);
            }
        }
        &::before {
            position: absolute;
            display: block;
            width: ~"calc(100% + 30px)";
            content: '';
            top:0;
            left: -15px;
            height: 100%;
        }
        & p.description {
            position: relative;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: var(--scheme-color-0);
            padding: 0 12px;
            & span.major {
                margin-right: 12px;
            }
            & span.major,
            & span.minor {
                & > span {
                    background-color: var(--scheme-color-3);
                }
            }
        }        
    }
    & div.stat {
        padding-bottom: 12px;
        border-top: thin solid var(--scheme-color-4);
    }
    & div.progress {
        & p {
            color: var(--scheme-color-1);
            display: block;
            text-align: center;
        }
        padding: 12px 12px;
    }
}