@import-glob "views/*.css";

@import-glob "components/*.css";

.sheetform {
    padding: 0;
    background-color: #0b0b0b !important;
    height: 100%;
    
    .charactersheet {
        padding: 4px !important;
        border: #550000 4px double !important;
        
        .img-wrapper {
            margin: auto;
            width: fit-content;
            height: fit-content;
            img {
                width: 400px;
            }
        }
        
        button {
            background-color: #550000;
            border-radius: 1em;
            border: 0;
            margin: 0px 2px;
            padding: 0px;
            text-align: center;
            vertical-align: middle;

            &[type=roll] {
                background-color: #550000;
                border: 0;
                width: 1.5em;
                height: 1.5em;
                background-image: none;
                color: white;
                border-radius: 8px;
                box-shadow: none;
            }
        }
        
        input {
            background-color: #444444;
            border: none;
            color:#aaaaee;
            
            &[type=text],
            &[type=number] {
                padding: 4px;
                text-align: center;
            }
            
            &[disabled] {
                background-color: #111111;
                border: 3px solid #444444;
                padding: 1px;
            }
            
            &[type="number"]::-webkit-inner-spin-button,
            &[type="number"]::-webkit-outer-spin-button {
                appearance: none;
                margin: 0;
            }
        }
    }
}



.tabflex {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: fit-content;
    justify-content: center;
    flex: 1 1 0;
    gap: 2px;
    
    > button {
        width: 100%;
        color: white;
    }
}

.sheet-tabstoggle {
    &[value="main"]~button.tabbtn[name="act_main"],
    &[value="skills"]~button.tabbtn[name="act_skills"],
    &[value="magic"]~button.tabbtn[name="act_magic"],
    &[value="enhancements"]~button.tabbtn[name="act_enhancements"],
    &[value="matrix"]~button.tabbtn[name="act_matrix"],
    &[value="vehicles"]~button.tabbtn[name="act_vehicles"],
    &[value="equipment"]~button.tabbtn[name="act_equipment"],
    &[value="character"]~button.tabbtn[name="act_character"] {
        color: #aaaaee;
    }
}

.newSrCheckbox {
    position: relative;
    width: 1.3em !important;
    margin: auto;
    border-radius: 100%;
    visibility: hidden;
    
    &::after {
        visibility: visible;
        content: "";
        position: absolute;
        display: inline-block;
        width: 1.3em;
        height: 1.3em;
        margin: auto;
        border-radius: 6px;
        background-color: #550000;
        text-align: center;
        vertical-align: middle;
        overflow: hidden;
        top: 50%;
        transform: translateY(-50%);
    }
    
    &:checked::after {
        content: "X";
    }
}

.gmroll {
    position: absolute;
    display: flex;
    left: calc(100% - 16em);
    top: 16em;
    width: 12em;
    
    button {
        color:#0b0b0b;
        width: 100%;
    }
    
    .toggmroll[value="/w gm "]~button.togbtn[name="act_toggmroll"],
    .togedge[value="!/"]~button.togbtn[name="act_togedge"] {
        color: #aaaaee;
    }
}

.generic-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    justify-content: space-around;
    padding: 2em;
    width: auto;
    min-height: 100%;
    height: fit-content;
}

.tab {
    margin-top: 10px;
    outline: 4px;
    outline-offset: 4px;
    outline-style: double;
    outline-color: #550000;
    width: 100%;
    min-height: 40em;
    height: fit-content;
    display: none;
}

h2 {
    color: #aaaaee;
    font-size: 22pt;
    margin-bottom: 0.7em;
}

.hidden {
    &.op {
        opacity: 0;
    }

    &.vis {
        visibility: hidden;
    }

    &.disp {
        display: none;
    }
}