app-module-categories {
    position: absolute;
    width: 100%; height: 100%;
    --catalog-padding: 16px;
    --btns-font-size: 1.4rem;
    --btns-width: calc(100% / 3);
    --btns-height: 15rem;
}

app-module-categories scroll-area {
    position: absolute;
    width: 100%; height: 100%;
    padding: calc(var(--search-section-height) + 10px) var(--catalog-padding) var(--catalog-padding) var(--catalog-padding);
    --scroll-area-track-v-top: calc(var(--search-section-height) + 6px);
    --scroll-area-track-color: transparent;
    --scroll-area-thumb-color: var(--ui-master-color);
    overflow-y: auto;
}

body.items app-module-categories scroll-area {
    padding: 0 var(--catalog-padding) 0 var(--catalog-padding);
    --scroll-area-track-v-top: calc(var(--items-scroll-padding) + 6px);
}

app-module-categories button {
    position: relative;
    display: inline-block; 
    vertical-align: top;
    box-sizing: border-box;
    border: 0; margin: 0;
    background-color: transparent;
    cursor: pointer;
    white-space: normal;
    outline: none;
    width: var(--btns-width); height: var(--btns-height);
    opacity: 1;
    transition: transform var(--anim-duration), opacity calc(var(--anim-duration) * 2);
    transition-delay: var(--anim-duration);
}

app-module-categories button::before {
    content: '';
    position: absolute;
    left: 0; top: 0; width: 100%; height: 100%;
    border-radius: 2rem;
    opacity: 0;
    background-color: #007AFF;
    transition: opacity 0.6s;
    z-index: -1;
}

app-module-categories button.loading {
    opacity: 0;
}


app-module-categories button:active {
    transform: scale(0.9);
    transition-delay: 0s;
}

app-module-categories button div.icon {
    position: absolute;
    left: 0; top: 3%; width: 100%; height: 60%; 
    font-size: 0;
    text-align: center;
    transition: filter var(--anim-duration);
}

app-module-categories button div.icon svg {
    width: 90%;
    height: 98%;
}

app-module-categories button div.icon img {
    max-width: 100%;
    max-height: 100%;
}

app-module-categories button div.title {
    position: absolute;
    box-sizing: border-box;
    left: 0; bottom: 0; width: 100%;
    padding: 0 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--btns-font-size);
    color: #333;
    word-break: break-word;
    transition: color var(--anim-duration);
    transform: scaleY(0.85);
}

app-module-categories button:active::before,
body.items app-module-categories button.active::before {
    opacity: 1;
    transition: opacity 0s;
    transition-delay: 0s;
}

app-module-categories button:active .icon,
body.items app-module-categories button.active .icon {
    filter: invert(1) brightness(1.5);
    transition: filter 0s;
    transition-delay: 0s;
}


app-module-categories button:active div.title,
body.items app-module-categories button.active div.title {
    color: #fff;
    transition: color 0s;
    transition-delay: 0s;
}