roll20-character-sheets/Ars_Magica_5th/source/tabs/abilities/abilities.scss

$characteristics: Intelligence, Perception, Presence, Communication,Strength, Stamina, Dexterity, Quickness;

.ui-dialog .tab-content .charsheet {
    .characteristics {
        margin: 0;
        padding: 0;
        position: sticky;
        padding: 1rem;
        background: var(--col-madderlake);
        box-shadow: 2px 2px 6px var(--col-indigo);
        top: 20px;
        > div {
            > div.repcontainer > div.repitem > div.shapeshiftBlock {
                > div.repcontrol[data-groupname="repeating_shapeshifts"] > button.repcontrol_add {
                    display: none;
                }
                // Hide the block and the modifiable title when the block is not selected
                input.shapeshiftSelector[value="0"] {
                    background: var(--col-indigo);
                    ~ h2.shapeshiftTitle > input.shapeshiftNameText {
                        display: none;
                    }
                    ~ div.characteristicsBlock {
                        display: none;
                    }
                }
                // Hide the clickable action when he block is selected
                input.shapeshiftSelector[value="1"] {
                    ~ h2.shapeshiftTitle > button.shapeshiftNameAction {
                        display: none;
                    }
                }
            }
        }
    }
    .__abilityTab {
        grid-template-columns: 1fr 2fr;
        padding: 2rem 3rem;
        gap: 1rem;
    }
    .abilities {
        border-image: var(--border-lined) 50 fill round;
        border-image-width: 50px;
        padding: 1rem 3rem;
        margin: 0;
        filter: drop-shadow(2px 2px 2px var(--col-indigo));
    }
    .shiftContainer {
        display: flex;
    }
    .charRow {
        display: flex;
        flex-direction: row;
        height: 30px;
        margin: 0;
        align-items: center;
        justify-content: space-between;
        padding: 0px;
        input[type="number"] {
            width: 50px;
            height: 100%;
            text-align: center;
        }
        @each $char in $characteristics {
            input[type="hidden"][value=#{$char}] + label.label__#{$char} {
                background: var(--col-leadWhite);
            }
        }
        label {
            display: flex;
            align-items: center;
            cursor: pointer;
            margin: 0;
            padding: 0;
            height: 100%;
            span {
                margin: auto 5px;
            }
            &:first-of-type {
                flex: 1;
            }
        }
    }

}