/***********************************************************/
/*                                                         */
/* Plataforma e-ducativa - Argentina                       */
/*                                                         */
/* Copyright (c) 2026 de e-ducativa Educación Virtual S.A. */
/*                                                         */
/***********************************************************/
/* ====================================
   EDU-INLINE-FILTER Component - Inline Filter Composition
   ==================================== */

:root {
    /* Visual design */
    /* Border radius - map to global theme */
    --edu-inline-filter-border-radius: var(--theme-component-border-radius);
    --edu-inline-filter-border-width: 1px;
    --edu-inline-filter-border-color: var(--theme-primary);

    /* Filter colors */
    --edu-inline-filter-label-bg: var(--theme-light-base);
    --edu-inline-filter-label-color: var(--theme-dark-base);

    /* Sizing (matches all components) - map to global theme */
    --edu-inline-filter-height-sm: var(--theme-component-height-sm);
    --edu-inline-filter-height: var(--theme-component-height);
    --edu-inline-filter-height-lg: var(--theme-component-height-lg);

    --edu-inline-filter-padding-x-sm: 10px;
    --edu-inline-filter-padding-x: 12px;
    --edu-inline-filter-padding-x-lg: 16px;

    /* Select specific */
    --edu-inline-filter-select-padding-right-sm: 28px;
    --edu-inline-filter-select-padding-right: 32px;
    --edu-inline-filter-select-padding-right-lg: 36px;
    --edu-inline-filter-select-arrow-size: 0.75em;
}

/* ====================================
   Base Container - Creates unified border
   ==================================== */

.edu-inline-filter {
    display: inline-flex;
    align-items: center;
    position: relative;
    border: var(--edu-inline-filter-border-width) solid var(--edu-inline-filter-border-color);
    border-radius: var(--edu-inline-filter-border-radius);
    vertical-align: middle;
}

/* ====================================
   Child Components - Remove borders, add separators
   ==================================== */

/* Remove all child borders */
.edu-inline-filter > * {
    border: none;
    border-radius: 0;
    margin: 0;
}

/* Add border radius to first child (left side) */
.edu-inline-filter > *:first-child {
    border-top-left-radius: var(--edu-inline-filter-border-radius);
    border-bottom-left-radius: var(--edu-inline-filter-border-radius);
}

/* Add border radius to last child (right side) */
.edu-inline-filter > *:last-child {
    border-top-right-radius: var(--edu-inline-filter-border-radius);
    border-bottom-right-radius: var(--edu-inline-filter-border-radius);
}

/* Add left separator to all children except first */
.edu-inline-filter > *:not(:first-child) {
    border-left: var(--edu-inline-filter-border-width) solid var(--edu-inline-filter-border-color);
}

/* ====================================
   Filter Label Sub-component
   ==================================== */

.edu-inline-filter-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--edu-inline-filter-height);
    padding: 0 var(--edu-inline-filter-padding-x);
    background-color: color-mix(in srgb, var(--edu-inline-filter-border-color) var(--edu-inline-filter-label-bg-mix), var(--edu-inline-filter-label-bg));
    color: var(--edu-inline-filter-label-color);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    user-select: none;
    box-sizing: border-box;
}

/* ====================================
   Filter Input Sub-component
   ==================================== */

.edu-inline-filter-input {
    display: inline-flex;
    align-items: center;
    height: var(--edu-inline-filter-height);
    padding: 0 var(--edu-inline-filter-padding-x);
    background-color: var(--edu-inline-filter-label-bg);
    color: var(--edu-inline-filter-label-color);
    font-size: 16px;
    box-sizing: border-box;
    outline: none;
    min-width: 120px;
}

.edu-inline-filter-input:focus {
    box-shadow: inset 0 0 0 1px var(--edu-inline-filter-border-color);
}

/* ====================================
   Filter Button Sub-component
   ==================================== */

.edu-inline-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--edu-inline-filter-padding-x);
    height: var(--edu-inline-filter-height);
    background-color: var(--edu-inline-filter-label-bg);
    color: var(--edu-inline-filter-label-color);
    font-size: 16px;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    white-space: nowrap;
    gap: 6px;
    transition: background-color var(--edu-inline-filter-transition-duration) var(--edu-inline-filter-transition-timing);
}

.edu-inline-filter-btn:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--edu-inline-filter-border-color) 12%, var(--edu-inline-filter-label-bg));
}

.edu-inline-filter-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Icon-only button */
.edu-inline-filter-btn-icon {
    padding: 0;
    width: var(--edu-inline-filter-height);
}

/* ====================================
   Filter Select Sub-component
   ==================================== */

.edu-inline-filter-select {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: var(--edu-inline-filter-height);
    min-width: 120px;
}

.edu-inline-filter-select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 0 var(--edu-inline-filter-select-padding-right) 0 var(--edu-inline-filter-padding-x);
    height: 100%;
    width: 100%;
    background-color: var(--edu-inline-filter-label-bg);
    color: var(--edu-inline-filter-label-color);
    font-size: 16px;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--theme-transition-duration) var(--theme-transition-timing);
}

.edu-inline-filter-select select:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--edu-inline-filter-border-color) 8%, var(--edu-inline-filter-label-bg));
}

.edu-inline-filter-select select:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--edu-inline-filter-border-color);
}

.edu-inline-filter-select select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Select arrow */
.edu-inline-filter-select::after {
    content: '\25BC';
    position: absolute;
    right: var(--edu-inline-filter-padding-x);
    pointer-events: none;
    font-size: var(--edu-inline-filter-select-arrow-size);
    color: var(--edu-inline-filter-border-color);
}

/* ====================================
   Filter Checkbox Sub-component
   ==================================== */

.edu-inline-filter-check {
    display: inline-flex;
    align-items: center;
    height: var(--edu-inline-filter-height);
    padding: 0 var(--edu-inline-filter-padding-x);
    background-color: transparent;
    color: var(--edu-inline-filter-label-color);
    font-size: 16px;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    gap: 8px;
    transition: background-color var(--theme-transition-duration) var(--theme-transition-timing);
}

.edu-inline-filter-check:hover:not(:has(input:disabled)) {
    background-color: transparent;
}

.edu-inline-filter-check input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: var(--edu-inline-filter-border-color);
}

.edu-inline-filter-check input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

.edu-inline-filter-check:has(input:disabled) {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ====================================
   Filter Dropdown Sub-component
   ==================================== */

.edu-inline-filter > .edu-dropdown {
    border: none;
    border-radius: 0;
    margin: 0;
}

.edu-inline-filter > .edu-dropdown .edu-dropdown-wrapper {
    border: none;
    border-radius: 0;
}

.edu-inline-filter > .edu-dropdown .edu-dropdown-toggle {
    height: var(--edu-inline-filter-height);
    border: none;
    border-radius: 0;
    background-color: var(--edu-inline-filter-label-bg);
    padding: 0 var(--edu-inline-filter-select-padding-right) 0 var(--edu-inline-filter-padding-x);
    font-size: 16px;
}

.edu-inline-filter > .edu-dropdown .edu-dropdown-toggle:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--edu-inline-filter-border-color) 8%, var(--edu-inline-filter-label-bg));
}

/* ====================================
   Size Variants
   ==================================== */

/* Small */
.edu-inline-filter-sm .edu-inline-filter-label {
    height: var(--edu-inline-filter-height-sm);
    padding: 0 var(--edu-inline-filter-padding-x-sm);
    font-size: 12px;
}

.edu-inline-filter-sm .edu-inline-filter-input {
    height: var(--edu-inline-filter-height-sm);
    padding: 0 var(--edu-inline-filter-padding-x-sm);
    font-size: 14px;
}

.edu-inline-filter-sm .edu-inline-filter-btn {
    height: var(--edu-inline-filter-height-sm);
    padding: 0 var(--edu-inline-filter-padding-x-sm);
    font-size: 14px;
}

.edu-inline-filter-sm .edu-inline-filter-btn-icon {
    width: var(--edu-inline-filter-height-sm);
}

.edu-inline-filter-sm .edu-inline-filter-select {
    height: var(--edu-inline-filter-height-sm);
}

.edu-inline-filter-sm .edu-inline-filter-select select {
    padding: 0 var(--edu-inline-filter-select-padding-right-sm) 0 var(--edu-inline-filter-padding-x-sm);
    font-size: 14px;
}

.edu-inline-filter-sm .edu-inline-filter-select::after {
    right: var(--edu-inline-filter-padding-x-sm);
}

.edu-inline-filter-sm .edu-inline-filter-check {
    height: var(--edu-inline-filter-height-sm);
    padding: 0 var(--edu-inline-filter-padding-x-sm);
    font-size: 14px;
}

.edu-inline-filter-sm .edu-inline-filter-check input[type="checkbox"] {
    width: 14px;
    height: 14px;
}

.edu-inline-filter-sm > .edu-dropdown .edu-dropdown-toggle {
    height: var(--edu-inline-filter-height-sm);
    padding: 0 var(--edu-inline-filter-select-padding-right-sm) 0 var(--edu-inline-filter-padding-x-sm);
    font-size: 14px;
}

/* Large */
.edu-inline-filter-lg .edu-inline-filter-label {
    height: var(--edu-inline-filter-height-lg);
    padding: 0 var(--edu-inline-filter-padding-x-lg);
    font-size: 16px;
}

.edu-inline-filter-lg .edu-inline-filter-input {
    height: var(--edu-inline-filter-height-lg);
    padding: 0 var(--edu-inline-filter-padding-x-lg);
    font-size: 18px;
}

.edu-inline-filter-lg .edu-inline-filter-btn {
    height: var(--edu-inline-filter-height-lg);
    padding: 0 var(--edu-inline-filter-padding-x-lg);
    font-size: 18px;
}

.edu-inline-filter-lg .edu-inline-filter-btn-icon {
    width: var(--edu-inline-filter-height-lg);
}

.edu-inline-filter-lg .edu-inline-filter-select {
    height: var(--edu-inline-filter-height-lg);
}

.edu-inline-filter-lg .edu-inline-filter-select select {
    padding: 0 var(--edu-inline-filter-select-padding-right-lg) 0 var(--edu-inline-filter-padding-x-lg);
    font-size: 18px;
}

.edu-inline-filter-lg .edu-inline-filter-select::after {
    right: var(--edu-inline-filter-padding-x-lg);
}

.edu-inline-filter-lg .edu-inline-filter-check {
    height: var(--edu-inline-filter-height-lg);
    padding: 0 var(--edu-inline-filter-padding-x-lg);
    font-size: 18px;
}

.edu-inline-filter-lg .edu-inline-filter-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.edu-inline-filter-lg > .edu-dropdown .edu-dropdown-toggle {
    height: var(--edu-inline-filter-height-lg);
    padding: 0 var(--edu-inline-filter-select-padding-right-lg) 0 var(--edu-inline-filter-padding-x-lg);
    font-size: 18px;
}

/* ====================================
   Color Variants - Primary (Default)
   ==================================== */

/* Primary is the default, using --edu-inline-filter-border-color: var(--theme-primary) */
/* But we add explicit class for consistency */
.edu-inline-filter-primary {
    border-color: var(--theme-primary);
}

.edu-inline-filter-primary > *:not(:first-child) {
    border-left-color: var(--theme-primary);
}

.edu-inline-filter-primary .edu-inline-filter-label {
    background-color: color-mix(in srgb, var(--theme-primary) var(--theme-bg-mix-subtle), var(--edu-inline-filter-label-bg));
}

.edu-inline-filter-primary .edu-inline-filter-input:focus {
    box-shadow: inset 0 0 0 1px var(--theme-primary);
}

.edu-inline-filter-primary .edu-inline-filter-btn:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--theme-primary) 12%, var(--edu-inline-filter-label-bg));
}

.edu-inline-filter-primary .edu-inline-filter-btn-solid {
    background-color: var(--theme-primary);
    color: var(--theme-primary-contrast);
}

.edu-inline-filter-primary .edu-inline-filter-btn-solid:hover:not(:disabled) {
    background-color: var(--theme-primary-hover);
}

.edu-inline-filter-primary .edu-inline-filter-btn-outline:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--theme-primary) 12%, var(--edu-inline-filter-label-bg));
}

.edu-inline-filter-primary .edu-inline-filter-select::after {
    color: var(--theme-primary);
}

.edu-inline-filter-primary .edu-inline-filter-select select:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--theme-primary) 8%, var(--edu-inline-filter-label-bg));
}

.edu-inline-filter-primary .edu-inline-filter-select select:focus {
    box-shadow: inset 0 0 0 1px var(--theme-primary);
}

.edu-inline-filter-primary .edu-inline-filter-check input[type="checkbox"] {
    accent-color: var(--theme-primary);
}

/* ====================================
   Color Variants - Secondary
   ==================================== */

.edu-inline-filter-secondary {
    border-color: var(--theme-secondary);
}

.edu-inline-filter-secondary > *:not(:first-child) {
    border-left-color: var(--theme-secondary);
}

.edu-inline-filter-secondary .edu-inline-filter-label {
    background-color: color-mix(in srgb, var(--theme-secondary) var(--theme-bg-mix-subtle), var(--edu-inline-filter-label-bg));
}

.edu-inline-filter-secondary .edu-inline-filter-input:focus {
    box-shadow: inset 0 0 0 1px var(--theme-secondary);
}

.edu-inline-filter-secondary .edu-inline-filter-btn:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--theme-secondary) 12%, var(--edu-inline-filter-label-bg));
}

.edu-inline-filter-secondary .edu-inline-filter-btn-solid {
    background-color: var(--theme-secondary);
    color: var(--theme-secondary-contrast);
}

.edu-inline-filter-secondary .edu-inline-filter-btn-solid:hover:not(:disabled) {
    background-color: var(--theme-secondary-hover);
}

.edu-inline-filter-secondary .edu-inline-filter-btn-outline:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--theme-secondary) 12%, var(--edu-inline-filter-label-bg));
}

.edu-inline-filter-secondary .edu-inline-filter-select::after {
    color: var(--theme-secondary);
}

.edu-inline-filter-secondary .edu-inline-filter-select select:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--theme-secondary) 8%, var(--edu-inline-filter-label-bg));
}

.edu-inline-filter-secondary .edu-inline-filter-select select:focus {
    box-shadow: inset 0 0 0 1px var(--theme-secondary);
}

.edu-inline-filter-secondary .edu-inline-filter-check input[type="checkbox"] {
    accent-color: var(--theme-secondary);
}