/* =========================================================
   VOXLY SERVER APPEARANCE v0.18.12
   ========================================================= */

:root {
    --voxly-role-owner: #f0b85a;
    --voxly-role-admin: #e56b6f;
    --voxly-role-moderator: #5aa9e6;
    --voxly-role-member: #aab2bf;
}


.voxly-theme-grid {
    display: grid;

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

    gap: 12px;

    margin-top: 14px;
}


.voxly-theme-field {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 10px 11px;

    border:
        1px solid
        var(--border);

    border-radius:
        8px;

    background:
        var(--panel-2);
}


.voxly-theme-field span {
    color:
        var(--text);

    font-size:
        13px;
}


.voxly-theme-field input[type="color"] {
    width: 42px;
    height: 30px;

    padding: 2px;

    border:
        1px solid
        var(--border);

    border-radius:
        6px;

    background:
        transparent;

    cursor:
        pointer;
}


.voxly-theme-field select {
    min-width: 150px;

    padding: 6px 8px;

    border:
        1px solid
        var(--border);

    border-radius:
        6px;

    background:
        var(--panel);

    color:
        var(--text);
}


.voxly-theme-wide {
    grid-column:
        1 / -1;
}


.voxly-role-color-heading {
    margin:
        22px 0 0;

    color:
        var(--text);

    font-size:
        14px;
}


.voxly-theme-actions {
    display: flex;

    gap: 9px;

    margin-top:
        18px;
}


.voxly-theme-reset {
    border:
        1px solid
        var(--border);

    border-radius:
        7px;

    padding:
        8px 12px;

    background:
        transparent;

    color:
        var(--muted);

    cursor:
        pointer;
}


.voxly-theme-reset:hover {
    color:
        var(--text);

    background:
        var(--panel-2);
}


/* =========================================================
   ROLE COLORS
   ========================================================= */

.voxly-member-row[data-voxly-role="owner"]
.voxly-member-name {
    color:
        var(--voxly-role-owner);
}


.voxly-member-row[data-voxly-role="admin"]
.voxly-member-name {
    color:
        var(--voxly-role-admin);
}


.voxly-member-row[data-voxly-role="moderator"]
.voxly-member-name {
    color:
        var(--voxly-role-moderator);
}


.voxly-member-row[data-voxly-role="member"]
.voxly-member-name {
    color:
        var(--voxly-role-member);
}


.voxly-role-owner {
    color:
        var(--voxly-role-owner)
        !important;

    border-color:
        color-mix(
            in srgb,
            var(--voxly-role-owner)
            55%,
            transparent
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--voxly-role-owner)
            13%,
            transparent
        ) !important;
}


.voxly-role-admin {
    color:
        var(--voxly-role-admin)
        !important;

    border-color:
        color-mix(
            in srgb,
            var(--voxly-role-admin)
            55%,
            transparent
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--voxly-role-admin)
            13%,
            transparent
        ) !important;
}


.voxly-role-moderator {
    color:
        var(--voxly-role-moderator)
        !important;

    border-color:
        color-mix(
            in srgb,
            var(--voxly-role-moderator)
            55%,
            transparent
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--voxly-role-moderator)
            13%,
            transparent
        ) !important;
}


.voxly-role-member {
    color:
        var(--voxly-role-member)
        !important;

    border-color:
        color-mix(
            in srgb,
            var(--voxly-role-member)
            55%,
            transparent
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--voxly-role-member)
            13%,
            transparent
        ) !important;
}


@media (max-width: 700px) {

    .voxly-theme-grid {
        grid-template-columns:
            1fr;
    }


    .voxly-theme-wide {
        grid-column:
            auto;
    }
}