/* Raspa original icon family. Geometry lives in static/icons/raspa-icons.svg. */
.r2-icon {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    overflow: visible;
    color: currentColor;
    vertical-align: -0.18em;
}

.r2-icon--xs { width: .875rem; height: .875rem; }
.r2-icon--sm { width: 1rem; height: 1rem; }
.r2-icon--md { width: 1.25rem; height: 1.25rem; }
.r2-icon--lg { width: 1.5rem; height: 1.5rem; }
.r2-icon--xl { width: 2rem; height: 2rem; }

.r2-icon-label {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: var(--r2-space-2, .5rem);
}

.r2-workspace-link__icon .r2-icon,
.r2-nav-link__icon .r2-icon {
    width: 1.05rem;
    height: 1.05rem;
    color: currentColor;
    opacity: .9;
}

.r2-topbar__icon-button .r2-icon {
    width: 1.4rem;
    height: 1.4rem;
}

.r2-account-menu__button .r2-icon {
    width: 1rem;
    height: 1rem;
}

.r2-school-link-row__icon .r2-icon {
    width: 1.2rem;
    height: 1.2rem;
}

.icon-img.r2-icon,
.quick-icon .r2-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.r2-menu-icon {
    display: inline-grid;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    color: currentColor;
}

.r2-menu-icon .r2-icon {
    width: 1.1rem;
    height: 1.1rem;
}

.r2-icon-catalog {
    display: grid;
    gap: var(--r2-space-6, 1.5rem);
}

.r2-icon-catalog__toolbar {
    display: flex;
    align-items: end;
    gap: var(--r2-space-4, 1rem);
}

.r2-icon-catalog__toolbar label {
    display: grid;
    width: min(28rem, 100%);
    gap: .35rem;
}

.r2-icon-catalog__group {
    display: grid;
    gap: var(--r2-space-3, .75rem);
}

.r2-icon-catalog__group h2 {
    margin: 0;
    font-size: 1.05rem;
}

.r2-icon-catalog__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--r2-border, #d7dee8);
    border-radius: var(--r2-radius-md, .75rem);
    background: var(--r2-border, #d7dee8);
}

.r2-icon-catalog__item {
    display: grid;
    min-height: 7.5rem;
    place-items: center;
    align-content: center;
    gap: .7rem;
    padding: 1rem;
    background: var(--r2-surface, #fff);
    color: var(--r2-text, #172b4d);
    text-align: center;
}

.r2-icon-catalog__item .r2-icon {
    width: 2rem;
    height: 2rem;
    color: var(--r2-primary, #1f4f91);
}

.r2-icon-catalog__item strong,
.r2-icon-catalog__item code {
    display: block;
}

.r2-icon-catalog__item code {
    color: var(--r2-text-muted, #66758c);
    font-size: .78rem;
}

.r2-icon-catalog__item[hidden],
.r2-icon-catalog__group[hidden] {
    display: none;
}

.r2-icon-catalog__samples {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.r2-icon-sample {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border: 1px solid var(--r2-border, #d7dee8);
    border-radius: var(--r2-radius-md, .75rem);
    background: var(--r2-surface, #fff);
}

.r2-icon-sample--dark {
    border-color: transparent;
    background: var(--r2-sidebar, #172b4d);
    color: #fff;
}

.r2-icon-sample--disabled {
    opacity: .42;
}

@media (max-width: 42rem) {
    .r2-icon-catalog__toolbar { align-items: stretch; flex-direction: column; }
    .r2-icon-catalog__toolbar label { width: 100%; }
    .r2-icon-catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Older shell styles used image filters. Sprite icons inherit color directly. */
.r2-topbar .notification-bell-icon,
.r2-sidebar .r2-icon,
.r2-button .r2-icon {
    filter: none !important;
}

.r2-topbar .notification-bell-icon {
    color: var(--r2-text, #172b4d);
}