/* Shared x-elements form rhythm for server-rendered dashboard forms. */
.x-form {
    display: grid;
    gap: 1rem;
}

:root {
    --x-time-series-series-colors: #3b82f6, #22c55e, #f59e0b, #ef4444, #a855f7, #06b6d4;
}

:root[data-theme="dark"] {
    --x-time-series-series-colors: #60a5fa, #4ade80, #fbbf24, #f87171, #c084fc, #22d3ee;
}

.x-form input {
    box-sizing: border-box;
}

x-form-field {
    --x-input-height: 34px;
    --x-input-font-size: var(--x-text-font-size-xs);
    --x-label-font-size: var(--x-text-font-size-xs);
    --x-input-padding-horizontal: var(--x-sp-2);
}

x-select {
    --x-select-input-font-size: var(--x-text-font-size-xs);
}

x-option {
    font-size: var(--x-text-font-size-xs);
}

x-attributes-filter {
    --x-attributes-filter-font-size: var(--x-text-font-size-xs);
}

.x-form x-btn {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
}

.x-form x-btn button {
    box-sizing: border-box;
    width: 100%;
}

.x-form--inline {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

.x-form--inline x-btn {
    width: auto;
    min-width: 10rem;
    margin-top: 0;
}

.x-form--inline x-btn button {
    width: 100%;
}

@media (max-width: 38rem) {
    .x-form--inline {
        grid-template-columns: 1fr;
    }

    .x-form--inline x-btn {
        width: 100%;
    }
}