.category-icon {
--category-icon-size: 24px;
--category-icon-surface: #131a21;
position: relative;
display: inline-flex;
width: var(--category-icon-size);
height: var(--category-icon-size);
flex: 0 0 auto;
vertical-align: middle;
overflow: visible;
}
.category-icon--income { color: #00ff9c; }
.category-icon--expense { color: #ff4fd8; }
.category-icon .category-icon-main {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 0 3px currentColor);
}
.category-icon--recurring .category-icon-main { width: 76%; height: 94%; }
.category-icon .category-icon-repeat {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
left: 71%;
top: 61%;
width: 38%;
height: 38%;
background: var(--category-icon-surface);
border-radius: 40%;
}
.category-icon-repeat img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 0 1.1px currentColor);
}
.category-label {
display: inline-flex;
align-items: center;
gap: 9px;
vertical-align: middle;
}
.msel-opt .category-label,
.msel-opt .category-icon,
.msel-opt .category-icon-repeat { overflow: visible; }
.category-mark {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
min-height: 40px;
border-radius: 6px;
vertical-align: middle;
}
.category-mark .category-icon { --category-icon-size: 32px; }
.category-mark:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
.category-mark::after {
content: attr(data-category-label);
position: absolute;
z-index: 35;
left: 0;
top: calc(100% + 4px);
max-width: min(240px, calc(100vw - 56px));
width: max-content;
padding: 6px 9px;
border: 1px solid var(--border);
border-radius: 6px;
background: #101820;
color: var(--text);
box-shadow: 0 4px 12px #0008;
font: 12px/1.4 var(--font);
white-space: normal;
overflow-wrap: anywhere;
text-align: left;
pointer-events: none;
visibility: hidden;
opacity: 0;
}
.category-mark:focus::after, .category-mark:hover::after { visibility: visible; opacity: 1; }
@media (max-width: 700px) {
.category-mark { min-width: 44px; min-height: 44px; }
}