@import "./_library";

$black:black;
$white:white;
$red:RGB(204, 008, 041);
$green:#3FB315;

$extend:URL(https://zupimages.net/up/21/21/9o92.png);
$retract:URL(https://zupimages.net/up/21/21/5hu0.png);

$esprit:URL(https://zupimages.net/up/21/21/0q1o.png);
$corps:URL(https://zupimages.net/up/21/21/sg1t.png);
$illusion:URL(https://zupimages.net/up/21/21/ujf8.png);
$realite:URL(https://zupimages.net/up/21/21/3qip.png);

$diceWhite:URL(https://zupimages.net/up/21/17/zb6c.png);
$diceBlack:URL(https://zupimages.net/up/21/17/kwln.png);

$selection:URL(https://zupimages.net/up/21/24/fqrz.png);

div.charsheet {
    min-width:700px;

    @import "./files/base";
    @import "./files/generique";
    @import "./files/top";
    @import "./files/attributs";
    @import "./files/prodiges";
    @import "./files/corruption";
    @import "./files/enduranceVitalite";
    @import "./files/combatStats";
    @import "./files/armes";

    div.tabs {
        position:relative;
        display:flex;
        justify-content: space-between;
        margin-top:10px;
        margin-bottom:10px;

        button[type="action"] {
            width:calc((100% / 3) - 60px);
            border:1px solid $black;
            font-weight:bold;
            font-variant: small-caps;

            &:last-of-type {
                margin-right:30px;
            }
        }

        @include options($black, $white);
    }
    
    div.equipementVertus {
        @include col(100%, calc((100% / 2) - 10px));

        @import "./files/vertus";
        @import "./files/reputation";
        @import "./files/equipement";
    }

    div.attaqueArmure {
        display:flex;
        width:calc(50% - (260px / 2) - 10px);
        justify-content: center;
        align-items:flex-start;
        flex-wrap: wrap;

        @import "./files/armures";
        @import "./files/attaque";
    }

    div.principal,
    div.prodige,
    div.combat {
        display:none;
    }

    input[type="hidden"].tabsToggle {
        &[value="principal"] ~ div.principal,
        &[value="prodige"] ~ div.prodige,
        &[value="combat"] ~ div.combat {
            display:flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: flex-start;
        }

        &[value="principal"] ~ div.tabs button[type="action"].principal,
        &[value="prodige"] ~ div.tabs button[type="action"].prodige,
        &[value="combat"] ~ div.tabs button[type="action"].combat {
            background:$black;
            color:$white;
        }
    }
}

@import "./files/templates";