@import "../../style/property.pcss";
@import "../../style/color.pcss";
@import "../../style/border.pcss";
@import "../../style/theme.pcss";


:host {
    box-sizing: border-box;
}

.navigation {
    
    &.left {
        left: 0;
    }
    
    &.right {
        right: 40px;
    }

    box-sizing: border-box;
    position: absolute;
    top: 0;
    display: block;
    cursor: pointer; 
    width: 20px; 
    
    transition: top 0.2s ease, visibility 0.3s ease;

    & [data-monster-role="navigation-list"] {

        & ul {
            margin: 0;
            padding: 0 0 0 10px;
            list-style-type: none; 
        }

        & ul li {
            position: relative;
            padding-left: 10px;
        }

        & ul li:before {
            content: ""; 
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 10px; 
            border-left: 1px dotted var(--monster-color-primary-2); 
            margin-top: 0;
        }
        
        & div.footer {
            display: flex;
            gap: 5px;
            padding: 5px 0;
        }
        
    }
    
    & [data-monster-role=navigation-control] {
        width: 20px;
    }

    & .heading-strip {
        display: flex;
        height: 0;
        
        background-color: var(--monster-color-primary-1);
        margin-bottom: 3px;

        &.level-h1 {
            height: 6px;
        }
        
        &.level-h2 {
            height: 4px;
        }
        
        &.level-h3 {
            height: 2px;
        }
        
        &.level-h4 {
            height: 1px;
        }
        
        &.level-h5 {
            height: 1px;
        }
        
        &.level-h6 {
            height: 1px;
        }
        
    }

}