.fex-design-toolbar {
    width:
        min(
            calc(100% - 32px),
            1000px
        );

    margin:
        24px auto;

    box-sizing:
        border-box;
}

.fex-toolbar-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        14px;
}

.fex-toolbar-title {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(
            --fex-color-heading,
            #111827
        );

    font-weight:
        700;
}

.fex-design-count {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        24px;

    min-height:
        24px;

    padding:
        3px 7px;

    border:
        1px solid
        var(
            --fex-color-border,
            #e5e7eb
        );

    border-radius:
        999px;

    background:
        var(
            --fex-color-surface-soft,
            #f3f4f6
        );

    color:
        var(
            --fex-color-text-muted,
            #6b7280
        );

    text-align:
        center;

    font-size:
        12px;

    font-weight:
        600;

    line-height:
        1;
}

.fex-design-filters {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;
}

.fex-filter-btn,
.fex-toolbar-copy {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        36px;

    padding:
        8px 13px;

    border:
        1px solid
        var(
            --fex-color-border,
            #e5e7eb
        );

    border-radius:
        999px;

    background:
        var(
            --fex-color-surface,
            #ffffff
        );

    color:
        var(
            --fex-color-text-muted,
            #4b5563
        );

    cursor:
        pointer;

    font-family:
        inherit;

    font-size:
        13px;

    font-weight:
        600;

    line-height:
        1;

    white-space:
        nowrap;

    transition:
        background-color
        var(
            --fex-transition-fast,
            150ms ease
        ),
        color
        var(
            --fex-transition-fast,
            150ms ease
        ),
        border-color
        var(
            --fex-transition-fast,
            150ms ease
        ),
        transform
        var(
            --fex-transition-fast,
            150ms ease
        ),
        box-shadow
        var(
            --fex-transition-fast,
            150ms ease
        );
}

.fex-filter-btn:hover,
.fex-toolbar-copy:hover {
    background:
        var(
            --fex-color-surface-hover,
            #f3f4f6
        );

    color:
        var(
            --fex-color-text-strong,
            #111827
        );

    border-color:
        var(
            --fex-color-border-hover,
            #cbd5e1
        );

    transform:
        translateY(-1px);
}

.fex-filter-btn:active,
.fex-toolbar-copy:active {
    transform:
        translateY(0);
}

.fex-filter-btn:focus-visible,
.fex-toolbar-copy:focus-visible {
    outline:
        var(
            --fex-border-width-strong,
            2px
        )
        solid
        var(
            --fex-focus-border,
            #2563eb
        );

    outline-offset:
        2px;
}

.fex-filter-btn.is-active {
    background:
        var(
            --fex-color-primary,
            #2563eb
        );

    color:
        var(
            --fex-color-primary-contrast,
            #ffffff
        );

    border-color:
        var(
            --fex-color-primary,
            #2563eb
        );
}

.fex-filter-btn.is-active:hover {
    background:
        var(
            --fex-color-primary-hover,
            #1d4ed8
        );

    border-color:
        var(
            --fex-color-primary-hover,
            #1d4ed8
        );

    color:
        var(
            --fex-color-primary-contrast,
            #ffffff
        );
}

.fex-toolbar-copy {
    color:
        var(
            --fex-color-primary,
            #2563eb
        );
}

.fex-toolbar-copy:hover {
    color:
        var(
            --fex-color-primary-hover,
            #1d4ed8
        );
}

.fex-random-btn {
    font-weight:
        700;
}

@media (max-width: 600px) {

    .fex-design-toolbar {
        width:
            calc(100% - 24px);

        margin:
            20px auto;
    }

    .fex-toolbar-header {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            8px;
    }

    .fex-design-filters {
        gap:
            6px;
    }

    .fex-filter-btn,
    .fex-toolbar-copy {
        min-height:
            34px;

        padding:
            7px 10px;

        font-size:
            12px;
    }
}

@media (max-width: 380px) {

    .fex-design-toolbar {
        width:
            calc(100% - 20px);
    }

    .fex-design-filters {
        display:
            grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        width:
            100%;
    }

    .fex-filter-btn,
    .fex-toolbar-copy {
        width:
            100%;
    }
}

@media (prefers-reduced-motion: reduce) {

    .fex-filter-btn,
    .fex-toolbar-copy {
        transition:
            none;
    }
}