@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

$primary_font: 'Roboto', sans-serif !default;
$bash_bg : #30323D !default;
$command-keyword: #60b8ff !default;
$side_margins : 15px !default;



.bash-mirror{
    position: relative;
    min-height: 100px;
    max-height: 400px;
    font-family: $primary_font;
    background-color: $bash_bg;
    color: white;
    border-radius: 5px;
    overflow:scroll;
    

    &::-webkit-scrollbar {
        width: 6px;
    }
    
       
    &::-webkit-scrollbar-thumb {
        width: 3px;
        background-color: #6f7380;
        border-radius: 10px;
        
        &:hover{
            background-color: #9598a3;
        }
    }

    &::-webkit-scrollbar-corner{
        background:$bash_bg ;
        border-radius: 10px;
    }


    p{
        margin: 0;
        padding: 0;
    }

    &-header{
        height: 25px;
        background-color: rgba($bash_bg,0.9);
        border-radius: 5px 5px 0 0;
        border-bottom: .2px solid rgba(0, 0,0,.4);

        
    }


    &-content-wrap{
        max-height: 100%;
        padding: $side_margins;


        .current-path{
            opacity: .8;

            
        }

        // command input
        .command-input-container{
            width: 100%;
            display: flex;
            align-items: center;

            .command-line-sign{
                padding: 0 5px;
            }
            // input
            input{
                width: 98%;
                height: auto;
                background-color: $bash_bg;
                color: white;
                outline: none;
                border: none;
            }
            
        }

        .user-input{
            //margin-bottom: 5px;

            .command-keyword{
                color: $command-keyword;
            }

            
        }

        // command output
        .command-output-container{
            margin-bottom: 15px;

        }

        ul, ol{
            list-style: none;
            
            li{
                display: flex;
                align-items: flex-start;
                margin-bottom: 5px;
                svg{
                    max-width: 20px;
                    margin-right: 5px;
                    opacity: .7;
                }
            }
        }

        .bash-mirror-error{
            color:#ff916f;
        }

    }

    
}