/**
 * Grid Builder Filter Styles
 *
 * @package CB_Plugin
 */

/* Filter - Container */
.c-grid-builder__filter {
    margin-bottom: var(--gb-filter-margin-bottom, 24px);
}

/* Filter - List */
.c-grid-builder__filter-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: var(--gb-filter-list-margin, 0);
    padding: var(--gb-filter-list-padding, 0);
    align-items: center;
    gap: var(--gb-filter-gap, 16px);
}

.c-grid-builder__filter-button {
    padding: var(--gb-filter-button-padding, 8px 16px);
    border-radius: var(--gb-filter-button-border-radius, 4px);
    border: var(--gb-filter-button-border, 1px solid #ddd);
    background-color: var(--gb-filter-button-background-color, #fff);
    cursor: pointer;
    transition: var(--gb-filter-button-transition, all 0.3s ease-in-out);
}

.c-grid-builder__filter-button:is(:hover, :focus) {
    background-color: var(--gb-filter-button-hover-background-color, #f0f0f0);
}

.c-grid-builder__filter-button.is--active {
    background-color: var(--gb-filter-button-active-background-color, #0073aa);
    border-color: var(--gb-filter-button-border-active, 1px solid #0073aa);
    color: var(--gb-filter-button-active-color, #fff);
}

/* Filter - Dropdown */
.c-grid-builder__filter-dropdown {
    position: relative;
    display: inline-block;
    min-width: var(--gb-filter-dropdown-min-width, 200px);
}

.c-grid-builder__styled-dropdown {
    position: relative;
    width: 100%;
}

.c-grid-builder__styled-select {
    width: 100%;
    padding: var(--gb-filter-select-padding, 10px 30px 10px 15px);
    border: var(--gb-filter-select-border, 1px solid #ddd);
    border-radius: var(--gb-filter-select-border-radius, 3px);
    appearance: none;
    background-color: var(--gb-filter-select-background-color, #fff);
    cursor: pointer;
    margin-bottom: 0;
}

.c-grid-builder__arrow-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--gb-filter-select-arrow-color, #333);
    pointer-events: none;
}

/* Filter - Loading */
.c-grid-builder__loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--gb-filter-loading-padding, 20px);
}

.c-grid-builder__loading:after {
    content: '';
    width: var(--gb-filter-loading-width, 30px);
    height: var(--gb-filter-loading-height, 30px);
    border: var(--gb-filter-loading-border, 3px solid #f3f3f3);
    border-top: var(--gb-filter-loading-border-top, 3px solid #0073aa);
    border-radius: var(--gb-filter-loading-border-radius, 50%);
    animation: gbSpin 1s linear infinite;
}

@keyframes gbSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Filter - Alignment */
.c-grid-builder__filter--align-left {
    text-align: left;
}

.c-grid-builder__filter--align-center {
    text-align: center;
}

.c-grid-builder__filter--align-right {
    text-align: right;
}