@import "Mapeate.configuracion.scss";

.mapeate-web{

    position : relative;
    top: 0em;
    left : 0em;
    width : 100%;
    height : 100%;
    background-color : $color-detras;
    color : $color-delante;
    overflow : hidden;

    &,input,textarea,button{font-family : $fuente-principal;}

    [data-visible=false]{display : none;}

    [data-icono-imagen]::before{
        content : "";
        display : inline-block;
        width : 1em;
        height : 1em;
        margin-right : .3em;
        vertical-align : middle;
        background-position : center center;
        background-size : contain;
    }
    [data-icono]::before{
        content : "";
        margin-right : .3em;
        font-family : $fuente-iconificada;
    }

    a[href]{
        text-decoration : none;
        word-wrap : break-word;
    }
    a[href],[onmouseover],[onclick]{
        color : $color-primario;
        cursor : pointer;
        transition-duration : $transicion-salida;
        transition-property : color;
        &:hover{
            color : $color-secundario;
            transition-duration : $transicion-entrada;
        }
    }

    main{
        position : absolute;
        top : 5em;
        left : 0em;
        bottom : 2em;
        width : 100%;
        padding : 1em 5em;
        overflow : auto;
        box-sizing : border-box;
    }

    footer{
        position : absolute;
        left : 0em;
        bottom : 0em;
        width : 100%;
    }

    h1{
        display : block;
        margin : .2em .5em;
        padding : 0em;
        font-size : 1em;
        &>a>span{vertical-align : middle;}
        img{
            width : auto;
            height : 4em;
        }
        [data-i18n]{
            margin-left : .3em;
            font-size : 3em;
        }
    }

    header nav{
        display : block;
        position : absolute;
        top : 0em;
        right : 0em;
        margin : .3em .7em;
        &>ul{
            margin : 0em;
            padding : 0em;
            list-style-type : none;
        }
        li{
            display : inline-block;
            margin : 0em .4em;
        }
        span+span{display : none;}
    }

    .licences{
        display : block;
        width : 100%;
        margin-bottom : .3em;
        text-align : center;
        font-size : .85em;
        font-weight : 900;
        img{
            width : auto;
            height : 1em;
        }
        img,a,span{vertical-align : middle;}
    }

    [data-diccionario]{display : inline-block;}
    .diccionario-elemento{
        display : block;
        position : fixed;
        width : 10em;
        height : 8em;
        background-color : $color-detras;
        border : .1em solid $color-gris;
        border-radius : $tamano-curvatura;
        box-shadow : 
            0em 0em 1em inset $color-gris, 
            .1em .1em .2em $color-delante;
        legend{display : none;}
        div{
            height : 5.5em;
            overflow : auto;
            box-sizing : border-box;
        }
        nav{
            position : absolute;
            bottom : .5em;
            left : 0em;
            width : 100%;
            height : 2em;
            text-align : center;
        }
        ul{
            margin : 0em;
            padding : 0em;
            white-space : nowrap;
            list-style-type : none;
            overflow : auto;
        }
        li{
            display : inline-block;
            a{
                display : inline-block;
                width : 2em;
                height : 2em;
                border : .1em solid $color-gris;
                background-color : $color-detras;
                border-radius : 1em;
                box-shadow : .1em .1em .2em $color-delante;
            }
            span{display : none;}
        }
    }

    blockquote{
        padding-left : .5em;
        background-color : mix($color-detras, #FFF, 50%);
        border-left : .3em solid $color-gris;
        box-sizing : border-box;
    }

}