:root {
    --rows: 4;
    --cols: 5;
    --folder-color: #ffddad;
    --folder-tab-color: #d69b48;
    --word-color: #a7d2ff;
    --word-color-dark: #5a9ce2;
    --word-starter-color: #aeef93;
    --word-starter-color-dark: #80e157;
    --action-color:#a61f00;
    --word-noun: #d6c6ff;
    --word-noun-dark: #8d6fd7;
    --word-adjective-dark: #f0cf56;
    --word-adjective: #ffe792;
    --word-verb-dark: #e36c7a;
    --word-verb: #ff9ca7;

    --color-danger: #8f53c9;
    --color-danger-light: #c091ee;
    --color-danger-lighter: #d7b9f4;

    --gap: 0.5em;
}

coms-grid {
    width: calc(100% - 2 * var(--gap));
    height: calc(100% - 2 * var(--gap));
    padding: var(--gap);
    background: white;
    display: flex;
}

grid-block {
    --total-row-gaps: calc(var(--rows) * var(--gap) + var(--gap));
    --total-col-gaps: calc(var(--cols) * var(--gap) + var(--gap));

    --cell-width: calc( var(--width) / var(--cols) - var(--total-col-gaps) / var(--cols));
    --cell-height: calc( var(--height) / var(--rows) - var(--total-row-gaps) / var(--rows));
   
    width: 100%;
    height: 100%;

    display: grid;
    gap: var(--gap);
}

.rotater {
    width: 100%;
    height: 100%;
    perspective: 2000px;
    --transition-time: 0.8s;
    --angle: 0deg;
    pointer-events: none;
}

.rotater > div {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateY(var(--angle));
    transition: transform var(--transition-time) cubic-bezier(0.32, 0.0, 0.68, 1);
}

.rotater[flip] .slot-1 > * {
    pointer-events: all;
}
.rotater:not([flip]) .slot-2 > * {
    pointer-events: all;
}

.slot-1, .slot-2 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
}

.slot-1 {
    transform: rotateY(180deg);
}


grid-space {
    display: flex;
}

grid-icon {
    width: 100%;
    height: 100%;
    position: relative;

    user-drag: none;
	-webkit-user-drag: none;
	-moz-user-select: none;

    --border: 4px;
    --tab-color: var(--word-color-dark);
    --card-color: var(--word-color);
}

grid-icon.starter, grid-icon.topic-starter {
    --card-color: var(--word-starter-color);
    --tab-color: var(--word-starter-color-dark);
}
grid-icon.noun, grid-icon.topic-noun {
    --card-color: var(--word-noun);
    --tab-color: var(--word-noun-dark);
}
grid-icon.verb, grid-icon.topic-verb {
    --card-color: var(--word-verb);
    --tab-color: var(--word-verb-dark);
}
grid-icon.adjective, grid-icon.topic-adjective {
    --card-color: var(--word-adjective);
    --tab-color: var(--word-adjective-dark);
}

grid-icon.topic {
    --tab-color: var(--folder-tab-color);
    --card-color: var(--folder-color);
}

grid-icon[i-hidden] {
    opacity: 0.5;
}



grid-icon .content {
    position: absolute;
    --b1: calc(var(--border) / 2);
    top: var(--b1);
    left: var(--b1);
    right: var(--b1);
    bottom: var(--b1);
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    user-select: none;
}

grid-icon .content .symbol {
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
grid-icon .content .symbol svg {
    height: 100%;
    max-width: 100%;
}
grid-icon .content .symbol img {
    height: 100%;
    max-width: 100%;
}

grid-icon .content .display-value {
    font-size: 1.6em;
    font-weight: 200;
    text-align: center;
    max-width: 90%;
}


grid-icon .card-icon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(2px 2px 4px #bfbfbfc5);
}

grid-icon .card-icon .outline {
    fill: none;
}
grid-icon .card-icon .card {
    fill: var(--card-color);
}
grid-icon .card-icon .tab {
    fill: var(--tab-color);
}


grid-icon[hover] .card-icon .card, 
grid-icon[hover] .card-icon .tab, 
grid-icon:hover .card-icon .card,
grid-icon:hover .card-icon .tab{
    filter: brightness(0.7) contrast(1.6);
} 

grid-icon[hover] .card-icon .outline {
    stroke: var(--color-danger);
}