/**
 * Responsive Styles
 * Media query adjustments for different screen sizes
 */

@use '../variables' as *;

// Tablet and below
@media (max-width: 991px) {
    .target-conditions-trait,
    .entity-selector-trait {
        .condition-trait-header {
            flex-direction: column;
            align-items: flex-start;
            gap: $es-spacing-sm;
        }

        .trait-header-right {
            width: 100%;
            justify-content: flex-end;
        }

        .target-block-tabs {
            flex-wrap: wrap;
        }
    }
}

// Mobile
@media (max-width: 767px) {
    .target-conditions-trait,
    .entity-selector-trait {
        .target-block-tab {
            padding: $es-spacing-sm;
            font-size: $es-font-size-xs;
        }

        .target-group-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .target-search-dropdown {
            width: 100% !important;
            left: 0 !important;
            right: 0 !important;
        }

        .dropdown-results-grid {
            grid-template-columns: 1fr !important;
        }
    }
}

// High-resolution displays
@media (min-width: 1600px) {
    .target-conditions-trait,
    .entity-selector-trait {
        .dropdown-results-grid.view-grid-3 {
            grid-template-columns: repeat(4, 1fr);
        }
    }
}