/* For template devs: Use these variables in your css files, to change the basic styling of the used elements */
.mod-jfilters_filters {
    --list-item-line-height : 1.8em;
    --input-item-dummy-size: 1.3em;
    --input-item-dummy-size-text-margin : 0.4em;
    --input-item-dummy-selected-color: #006898;
    --input-item-dummy-color-background: #fff;
    --input-item-dummy-color-border: #ccc;
    --input-item-dummy-color-hover: #ccc;
    --input-item-dummy-color-shadow-active: rgba(42, 105, 183, 0.25);
    --input-item-dummy-checkbox-radius: .2em;
    --button-background-color: #FBFBFB;
    --button-background--hover-color: #F4F4F4;
    --button-background--hover-shadow: #BBB;
    --button-text-color: #555555;
    --button-boder-color: #999;
    --button-selected-boder-color: #969696;
    --button-radius:.15em;
    --button-height: 1.8em;
}

.jfilters-filter-container {
    padding: 0.8rem 0 0.5rem 0;
    border-bottom: 1px solid #dfdfdf;
}

.jfilters-filter-header {
    font-size: 1em;
    display: inline-block;
    margin-bottom: .5rem;
}

.jfilters-filter-header__toggle {
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    outline: none;
    padding: 0;
    margin: 0;
    display: inline-block;
    border: none;
}

.jfilters-filter-header__toggle:focus {
    /*FF shows an outline for active buttons */
    outline: 0;
}

/* Set the chevron icon next to the filter header */
.jfilters-filter-header__toggle .jfilters-chevron {
    width: 1.2em;
    height: 1.2em;
    display: inline-block;
    transition: transform .1s;
    margin-inline-start: 0.2em;
}

.jfilters-filter-header__toggle[aria-expanded="false"] .jfilters-chevron {
    transform: rotate(-90deg);
}

.jfilters-filter-container__inner[aria-hidden="true"] {
    display: none;
}

/* Notification messages (e.g. validations from inputs) */
.jfilters-filter__alert{
    color: red;
    margin-top: .8rem
}

/* The button that toggles the drop-down lists */
.jfilters-filter-dropdown-toggle {
    min-width: 12rem;
    text-align: start;
}

.jfilters-filter-dropdown-container .jfilters-filter-search{
    padding: .3rem .5rem 0 .5rem;
}

/* The list search*/
.jfilters-filter-search {
    width: 100%;
    margin-bottom: .5rem;
}

.jfilters-filter-search__input {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    width: 100%;
    padding: .2em 0;
    padding-inline-start: .4em;
    padding-inline-end: 1.6em;
    height: 2em;
    box-sizing: border-box;
}

.jfilters-filter-search__input:focus {
    border-color: #8894aa;
    outline: 0;
}

.jfilters-filter-search__clear {
    background: unset;
    background-color: transparent;
    border-color: transparent;
    padding: .4em;
    position: absolute;
    right: 1em;
    cursor: pointer;
}

.jfilters-filter-search--rtl .jfilters-filter-search__clear {
    left: 1em;
}

.jfilters-filter-search__clear--hidden {
    display: none;
}

.jfilters-filter-search__clear svg {
    fill: currentColor;
    width: 1em;
    height: auto;
    display: block;
}

/* The options list */
.jfilters-filter-list {
    list-style: none;
    padding-inline-start: 0;
    margin-top: 0;
}

.jfilters-filter-container__inner > .jfilters-filter-list {
    margin-bottom: 0.5rem;
}

/** Nested list **/
.jfilters-filter-list .jfilters-filter-list {
    /* This is overwritten from templates using higher specificity (e.g. ids). Hence !important */
    padding-inline-start: 1.7em !important;
}

/** Nested list - visible **/
.jfilters-filter-list .jfilters-filter-list--visible {
    display: block !important;
}

.jfilters-filter-list__item {
    line-height: var(--list-item-line-height);
    vertical-align: middle;
}

.jfilters-filter-list__item--parent {
    display: block;
}

.jfilters-filter-list__item--hidden {
    display: none !important;
}

.jfilters-item-link {
    text-decoration: none;
    display: inline;
}

.jfilters-item-link:hover {
    text-decoration: underline;
}

.jfilters-item__counter {
    margin-inline-start: 0.3em;
}

.jfilters-item-link--selected {
    content: "";
    font-weight: 700;
}

/* the chevron icon */
.jfilters-item-link .jfilters-chevron {
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    transition: transform .1s;
}

.jfilters-item-link[aria-expanded="false"] .jfilters-chevron, .jfilters-item__toggle-btn[aria-expanded="false"] .jfilters-chevron {
    transform: rotate(-90deg);
}

/* the toggle button for nested lists */
.jfilters-item__toggle-btn {
    background: transparent;
    outline: none;
    padding: 0;
    margin: 0;
    margin-inline-start: -0.3em;
    display: inline-block;
    border: none;
    box-sizing: border-box;
    line-height: 0;
}

.jfilters-item__toggle-btn:focus {
    /*FF shows an outline for active buttons */
    outline: 0;
}

.jfilters-filter-container__inner ul[aria-hidden="true"] {
    display: none;
}

/* Buttons */
.jfilters-filter-list--buttons_single .jfilters-filter-list__item:not(.jfilters-filter-list__item--parent),
.jfilters-filter-list--buttons_multi .jfilters-filter-list__item:not(.jfilters-filter-list__item--parent)  {
    display:inline-block;
}

.jfilters-item-link--button{
    margin: 0.25em 0.25em 0.25em 0px;
    display: inline-block;
}

.jfilters-item__text{
    box-sizing: border-box;
}

.jfilters-item-link--button .jfilters-item__text{
    display: inline-block;
    box-sizing: content-box;
    text-decoration: none;
    background: var(--button-background-color);
    color: var(--button-text-color);
    border: 1px solid var(--button-boder-color);
    border-radius: var(--button-radius);
    text-align: center;
    /* We set !important to protect from anchors styling */
    padding: 0px 0.8em !important;
    min-height: var(--button-height) !important;
    height: auto !important;
}

.jfilters-item-link--button .jfilters-item__text:hover {
    background: var(--button-background--hover-color);
    box-shadow:inset 0 0 0.1em var(--button-background--hover-shadow);
}

.jfilters-item-link--button.jfilters-item-link--selected .jfilters-item__text{
    border: 2px solid var(--button-selected-boder-color);
}

/* The dummy input border */
.jfilters-item-link--dummy-input:before {
    background: var(--input-item-dummy-color-background);
    content: "";
    display: inline-block;
    margin-top: calc((var(--list-item-line-height) - var(--input-item-dummy-size)) / 2);
    position: absolute;
    border: .1em solid var(--input-item-dummy-color-border);
    cursor: pointer;
    text-align: center;
    width: var(--input-item-dummy-size);
    height: var(--input-item-dummy-size);
    transition: border-color .2s, background .2s, box-shadow .2s;
    overflow: hidden;
}

.jfilters-item-link--clear{
    font-size: 0.9em;
}

.jfilters-item-link--selected.jfilters-item-link--dummy-input:before {
    border-color:var(--input-item-dummy-selected-color);
    box-sizing: border-box;
}

.jfilters-item-link--dummy-input:active:before {
    box-shadow: 0 0 0 0.25rem var(--input-item-dummy-color-shadow-active);
}

.jfilters-item-link--dummy-input .jfilters-item__label-text {
    padding-inline-start: var(--input-item-dummy-size);
    margin-inline-start: var(--input-item-dummy-size-text-margin);
}

.jfilters-item__text--search-match {
    font-weight: bold;
    background: #f2f2f2;
    border: 1px solid #dddddd;
    border-radius: 2px;
}

.jfilters-item-link--checkbox:before {
    border-radius: var(--input-item-dummy-checkbox-radius);
}

.jfilters-item-link--radio:before {
    border-radius: 50%;
}

.jfilters-item-link--dummy-input:hover .jfilters-item__label-text::before, .jfilters-item-link--dummy-input:focus .jfilters-item__label-text::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: var(--input-item-dummy-size);
    height: var(--input-item-dummy-size);
    margin-top: calc((var(--list-item-line-height) - var(--input-item-dummy-size)) / 2);
    margin-inline-start: calc((var(--input-item-dummy-size-text-margin) + var(--input-item-dummy-size)) / -1);
    padding: 0;
    z-index: 99;
    box-sizing: border-box;
}

.jfilters-item-link--checkbox:hover .jfilters-item__label-text::before, .jfilters-item-link--checkbox:focus .jfilters-item__label-text::before {
    border: solid var(--input-item-dummy-color-hover);
    border-width: 0 8px 5px 0;
    transform: rotate(45deg) scaleX(0.38) scaleY(0.625);
    margin-top: calc((var(--list-item-line-height) - var(--input-item-dummy-size)) / 3.5);
}

.jfilters-item-link--radio:hover .jfilters-item__label-text::before, .jfilters-item-link--radio:focus .jfilters-item__label-text::before {
    --radio-circle-scale:0.6;
    background-color: var(--input-item-dummy-color-hover);
    border-radius: 50%;
    transform: scale(var(--radio-circle-scale));
}

/* Selected dummy inputs */
.jfilters-item-link--selected.jfilters-item-link--dummy-input .jfilters-item__label-text::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: var(--input-item-dummy-size);
    height: var(--input-item-dummy-size);
    margin-top: calc((var(--list-item-line-height) - var(--input-item-dummy-size)) / 2);
    margin-inline-start: calc((var(--input-item-dummy-size-text-margin) + var(--input-item-dummy-size)) / -1);
    padding: 0;
    z-index: 100;
    box-sizing: border-box;
}

.jfilters-item-link--selected.jfilters-item-link--checkbox .jfilters-item__label-text::before {
    border: solid var(--input-item-dummy-selected-color);
    border-width: 0 8px 5px 0;
    transform: rotate(45deg) scaleX(0.38) scaleY(0.625);
    margin-top: calc((var(--list-item-line-height) - var(--input-item-dummy-size)) / 3.5);
}

.jfilters-item-link--selected.jfilters-item-link--radio .jfilters-item__label-text::before {
    --radio-circle-scale:0.6;
    background-color: var(--input-item-dummy-selected-color);
    border-radius: 50%;
    transform: scale(var(--radio-circle-scale));
}

/* Calendars */
.jfilters-filter-container .date-value {
    cursor: pointer;
    background-color: hsl(0deg, 0%, 100%);
}

.dayContainer .jfilters-filter-calendar__date--active:not(.selected){
    background-color: #8090e633;
}

.dayContainer .jfilters-filter-calendar__date--active:not(.selected):hover, .dayContainer .jfilters-filter-calendar__date--active:not(.selected):focus {
    background-color: #e6e6e6;
    color: #393939;
}

.jfilters-filter-calendar__date-counter {
    font-size: 0.5rem;
    background-color: #fff;
    color: #393939;
    padding: 0 .1rem;
    position: relative;
    top: -.6rem;
    right: -.2rem;
    border-radius: 30%;
}

/* Range Inputs */
.jfilters-filter-range_inputs {
    display: flex;
    gap: .5rem;
    width: 100%;
}

.jfilters-filter-range_inputs__input {
    flex:1 1 auto;
    width: 100px;
}