.ability-panel-container { border: var(--golder); background-image: url("/assets/images/texture.png"); box-shadow: var(--shadow); border-radius: 10px; display: flex; flex-direction: column; height: 100%; } .tab-row { display: flex; flex: 0 0 3rem; box-shadow: var(--shadow-bottom); border-radius: 10px; > * { flex: 1 1 0; } > :first-child { border-radius: 8px 0 0 0; border-right: 1px solid var(--border-color); } > :nth-child(2) { border-left: 1px solid var(--border-color); border-right: 1px solid var(--border-color); } > :nth-child(3) { border-left: 1px solid var(--border-color); border-right: 1px solid var(--border-color); } > :last-child { border-radius: 0 8px 0 0; border-left: 1px solid var(--border-color); } } .tab-button { height: 3rem; font-size: 1.375rem; font-weight: 600; color: black; border-bottom: solid 1px var(--border-color); border-right: 0; border-left: 0; border-top: 0; transition: all 0.25s ease-in-out; background-color: var(--tab); // box-shadow: var(--shadow-bottom); &.active { background-color: var(--tab-active); border-bottom: 3px solid var(--border-color); } } .footer { height: 5rem; width: 100%; display: flex; justify-content: center; align-items: center; border-radius: 0 0 10px 10px; box-shadow: var(--shadow-top); button { height: 3rem; width: 80%; border-radius: 10px; background: var(--accept); transition: background-color 0.2s ease-in-out; box-shadow: var(--shadow); &:hover { background-color: var(--accept-hover); } } } ability-table, trait-table, spellslots-table, proficiencies-table { flex: 0 0 calc(100% - 3rem); }