[shadow] {
    --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: var(--action-red);
    --word-noun: #d6c6ff;
    --word-noun-dark: #8d6fd7;
    --word-adjective-dark: #f0cf56;
    --word-adjective: #ffe792;
    --word-verb-dark: #e36c7a;
    --word-verb: #ff9ca7;
    --emphasis-color: #fb9753;
    --emphasis-color-dark: #e2581f;
    --emphasis-tab-color: #c1440e;
    --border: 4px;
    --gap: 0.5em;
    --shadow-color: #bfbfbfc5;
}

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

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

    --icon-color: rgb(41, 40, 40);
    --icon-color-hover: black;
    --tab-color: var(--word-color-dark);
    --card-color: var(--word-color);
    cursor: pointer;
}

.grid-icon.action, .grid-icon.topic-action {
    --icon-color:rgb(244 230 230);
    --icon-color-hover: white;
    --card-color: var(--action-color);
    --tab-color: var(--action-red-dark);
    color: white;
}

.grid-icon.emphasis, .grid-icon.topic-emphasis {
    --icon-color: #551f08;
    --icon-color-hover: #311103;
    --card-color: var(--emphasis-color);
    --tab-color: var(--emphasis-tab-color);
}

.grid-icon.starter, .grid-icon.topic-starter {
    --card-color: var(--word-starter-color);
    --tab-color: var(--word-starter-color-dark);
    --icon-color: #2f6517;
    --icon-color-hover: #1d440d;
}

.grid-icon.noun, .grid-icon.topic-noun {
    --card-color: var(--word-noun);
    --tab-color: var(--word-noun-dark);
    --icon-color: #3a2b5e;
    --icon-color-hover: #21173b;
}

.grid-icon.verb, .grid-icon.topic-verb {
    --card-color: var(--word-verb);
    --tab-color: var(--word-verb-dark);
    --icon-color: #7e1d20;
    --icon-color-hover: #4a0f11;
}

.grid-icon.adjective, .grid-icon.topic-adjective {
    --card-color: var(--word-adjective);
    --tab-color: var(--word-adjective-dark);
    --icon-color: #594a12;
    --icon-color-hover: #38340d;
}

.grid-icon.topic {
    --tab-color: var(--folder-tab-color);
    --card-color: var(--folder-color);
    --icon-color: #643d08;
    --icon-color-hover: #3c2303;
}




.grid-icon[i-hidden] {
    opacity: 0;
    pointer-events: none;
}
.grid-icon[i-disabled] {
    opacity: 0.4;
    pointer-events: none;
}

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

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    user-select: none;
    gap: 0.3em;

}


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

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

.grid-icon.image .content .symbol img{
    max-width: 100%;
    border-radius: 1.5vmin;
}

.grid-icon.image .content .display-value{
    display: none;
}

.symbol .text {
    font-size: 2em;
}

.symbol svg {
    height: 100%;
    max-width: 90%;
}

.symbol img {
    height: 100%;
    max-width: 90%;
    object-fit: contain;
}

.symbol .bg-img {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.grid-icon .content .display-value {
    font-size: 1.2em;
    font-weight: 300;
    text-align: center;
    max-width: 90%;
    word-wrap: break-word;
}

.grid-icon .content .subtitle {
    font-weight: 300;
    text-align: center;
    word-wrap: break-word;
    font-size: 0.85em;
    font-style: italic;
    opacity: 0.9;
    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 var(--shadow-color));
    transition: filter 0.1s ease-in-out;
}

.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, 
.grid-icon:hover .card-icon {
    filter: brightness(0.7) contrast(1.6);
    -webkit-filter: brightness(0.7) contrast(1.6);;
} 
.grid-icon:active .card-icon{
    filter: brightness(0.6) contrast(2);
    -webkit-filter: brightness(0.6) contrast(2);
}

.grid-icon:hover .icon {
    --icon-color: var(--icon-color-hover);
}

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

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