@layer components {
    .nur-quota {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        padding: var(--nur-space-2) var(--nur-space-3);
        border-radius: var(--nur-radius-sm);
        background: var(--nur-green-100);
        color: var(--nur-green-700);
    }

    .nur-quota__text {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--nur-space-2);
        font-size: var(--nur-text-sm);
    }

    .nur-quota__text small {
        font-size: var(--nur-text-xs);
        opacity: 0.8;
    }

    .nur-quota__bar {
        display: block;
        appearance: none;
        width: 100%;
        height: 6px;
        border: 0;
        border-radius: 3px;
        background: rgba(13, 92, 58, 0.18);
        color: currentColor;
        overflow: hidden;
    }

    .nur-quota__bar::-webkit-progress-bar {
        background: rgba(13, 92, 58, 0.18);
    }

    .nur-quota__bar::-webkit-progress-value {
        border-radius: 3px;
        background: currentColor;
    }

    .nur-quota__bar::-moz-progress-bar {
        border-radius: 3px;
        background: currentColor;
    }

    .nur-quota--low {
        background: var(--nur-sand-100);
        color: var(--nur-gold-600);
    }

    .nur-quota--low .nur-quota__bar,
    .nur-quota--low .nur-quota__bar::-webkit-progress-bar {
        background: rgba(169, 122, 31, 0.2);
    }

    .nur-quota--full {
        background: #eceff3;
        color: var(--nur-ink-soft);
    }

    .nur-quota--full .nur-quota__bar,
    .nur-quota--full .nur-quota__bar::-webkit-progress-bar {
        background: rgba(84, 97, 122, 0.2);
    }

    .nur-quota--compact {
        padding-block: 6px;
    }
}