@font-face {
    font-family: 'Material Icons';
    src: url('/assets/material-icons.ttf') format('truetype');
    font-display: block;
}

.material-icon {
    font: normal 20px/1 'Material Icons';
    flex: none;
}

[data-project-detail] .feature-actions {
    flex-wrap: nowrap;
    width: max-content;
    max-width: calc(100vw - var(--page) - max(var(--page), 22px));
    overflow-x: auto;
    scrollbar-width: thin;
    padding: 4px 2px;
}

[data-project-detail] .feature-actions > * {
    flex-shrink: 0;
}

@media (max-width: 720px) {
    [data-project-detail] .feature-actions {
        max-width: 100%;
    }
}

.material-picker {
    width: min(560px, calc(100% - 32px));
    max-height: 85vh;
    padding: 20px;
    border: 1px solid #ffffff36;
    border-radius: 12px;
    background: #211c29;
    color: #fff;
}

.material-picker::backdrop {
    background: #000a;
}

.material-picker-options, .material-picker-results {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-block: 12px;
}

.material-picker-results button {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    max-width: 100%;
    overflow-wrap: anywhere;
}