@import "font.less";



@media (min-width: 0) {

    /** --------------------- filter-modal Mobile ------------------------ **/

    .filters-modal {
        position: relative;

        padding: 28px 0 0 0;
        background-color: var(--tr-color-white);

        display: flex;
        flex-direction: column;
    }

    .filters-modal__close {
        position: absolute;
        padding: 0;
        border: 0;
        background: none;
        width: 24px;
        height: 24px;
        top: 28px;
        right: 16px;
    }

    .filters-modal__close i {
        font-size: 24px;
        line-height: 24px;
        display: inline-block;
    }

    .filters-modal__header {
        display: flex;
        flex-direction: row;
        padding-left: 16px;
        padding-right: 16px;
    }

    .filters-modal__header div:first-of-type {
        flex-grow: 1;
    }

    .filters-modal__header h4 {
        text-transform: uppercase;
        margin-bottom: 0;
        .H1-mobile;
    }

    .filters-modal__header-buttons {
        display: none;
    }

    .filters-modal__footer {
        background-color: var(--tr-color-white);

        padding: 16px 22px 16px 22px;

        border-top-left-radius: 20px;
        border-top-right-radius: 20px;

        box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, 0.1);

        display: flex;
        justify-content: space-between;

        column-gap: 16px;
    }

    .filters-modal__footer .btn {
        width: 50%;
        .M-desktop;
    }

    .filters-modal__body {
        margin-top: 32px;
        padding-left: 16px;
        padding-right: 16px;
        flex-shrink: 0;
        overflow-x: hidden;

    }

    .filters-modal__filter {
        margin-bottom: 32px;
    }

    .filters-modal__filter .filter-checkbox {
        margin-top: 12px;
    }

    /** --------------------- label Mobile ------------------------ **/

    label.filter-title {
        display: block;
        height: 20px;
        .L-regular-mobile;
    }

    label.filter-title span {
        vertical-align: middle;
    }

    label.filter-title i {
        display: inline-block;
        font-size: 20px;
        line-height: 20px;
        margin-right: 12px;
        color: var(--tr-color-blue-100);
        vertical-align: middle;
    }

    /** --------------------- filter-select Mobile ------------------------ **/

    .filter-select {
        position: relative;
    }

    .filter-select select {
        margin-top: 20px;
        display: block;
        position: relative;
        width: 100%;
        appearance: none;
        border: 1px solid var(--tr-color-gray-70);
        background-color: var(--tr-color-white);
        padding: 13px 15px 13px 15px;
        border-radius: 50px;
        color: var(--tr-color-black);
        .L-regular-mobile;
    }

    .filter-select_disabled select {
        color: var(--tr-color-gray-70);
    }

    .filter-select i.icon-arrow-down {
        position: absolute;
        font-size: 20px;
        bottom: 5px;
        right: 16px;
        color: var(--tr-color-gray-70);
    }

    /** --------------------- filter-input-select Mobile ------------------------ **/

    .filter-input-select {
        position: relative;
    }

    .filter-input-select input {
        margin-top: 20px;
        display: block;
        position: relative;
        width: 100%;
        appearance: none;
        border: 1px solid var(--tr-color-gray-70);
        background-color: var(--tr-color-white);
        padding: 13px 15px 13px 15px;
        border-radius: 50px;
        color: var(--tr-color-black);
        .L-regular-mobile;
    }

    .filter-input-select_disabled input {
        color: var(--tr-color-gray-70);
    }

    .filter-input-select input:focus {
        outline: none;
        border: 1px solid var(--tr-color-blue-100);
    }

    .filter-input-select i.icon-arrow-down {
        position: absolute;
        font-size: 24px;
        bottom: 5px;
        right: 20px;
        color: var(--tr-color-gray-70);
    }

    /** --------------------- filter-range Mobile ------------------------ **/

    .filter-range {
        position: relative;
    }

    .filter-range__inputs {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        column-gap: 15px;
    }

    .filters-modal .filter-range__inputs {
        column-gap: 80px;
    }

    .filter-range__inputs input {
        display: block;
        width: 50%;
        appearance: none;
        border: none;
        background-color: var(--tr-color-white);
        color: var(--tr-color-black);
        padding: 0;
        .L-medium-mobile;
    }

    .filter-range_disabled input {
        color: var(--tr-color-gray-70);
    }

    .filter-range__inputs input:first-of-type {
        text-align: left;
    }

    .filter-range__inputs input:last-of-type {
        text-align: right;
    }

    .filter-range__inputs input:focus {
        outline: none;
    }

    .filter-range__sliders {
        position: relative;
        height: 6px;
    }

    .filter-range__sliders input {
        position: absolute;
        width: 100%;
        height: 20px;
        top: -14px;
        background: none;
        pointer-events: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }

    .filter-range__sliders input::-webkit-slider-thumb {
        height: 20px;
        width: 20px;
        border-radius: 50%;
        border: 5px solid var(--tr-color-white);
        background-color: var(--tr-color-blue-100);
        pointer-events: auto;
        -webkit-appearance: none;
        box-shadow: 0 2px 4px 2px rgba(0,0,0,0.15);
    }

    .filter-range__sliders input::-moz-range-thumb {
        height: 10px;
        width: 10px;
        border-radius: 50%;
        border: 5px solid var(--tr-color-white);
        background-color: var(--tr-color-blue-100);
        pointer-events: auto;
        -moz-appearance: none;
        box-shadow: 0 2px 4px 2px rgba(0,0,0,0.15);
    }

    .filter-range__progress {
        margin-top: 17px;
        position: relative;
        height: 8px;
        border-radius: 8px;
        background-color: var(--tr-color-gray-30);
    }

    .filter-range__progress div {
        position: absolute;
        height: 100%;
        border-radius: 8px;
        background-color: var(--tr-color-blue-100);
    }

    /** --------------------- filter-checkbox Mobile ------------------------ **/

    .filter-checkbox {
        line-height: 20px;
    }

    .filter-checkbox label {
        color: var(--tr-color-black);
        vertical-align: middle;
        .L-regular-mobile;
    }

    .filter-checkbox_disabled label {
        color: var(--tr-color-gray-70);
    }

    .filter-checkbox input {
        appearance: none;
        margin-right: 10px;
        width: 20px;
        height: 20px;
        border: none;
        border-radius: 5px;
        background-color: var(--tr-color-gray-30);
        vertical-align: middle;
    }

    .filter-checkbox input:checked {
        border: none;
        background-color: var(--tr-color-blue-100);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 10px 8px;
        background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5775 7.1675C3.3775 7.1675 3.1875 7.0875 3.0475 6.9475L0.2175 4.1175C-0.0725 3.8275 -0.0725 3.3475 0.2175 3.0575C0.5075 2.7675 0.9875 2.7675 1.2775 3.0575L3.5775 5.3575L8.7175 0.2175C9.0075 -0.0725 9.4875 -0.0725 9.7775 0.2175C10.0675 0.5075 10.0675 0.987499 9.7775 1.2775L4.1075 6.9475C3.9675 7.0875 3.7775 7.1675 3.5775 7.1675Z" fill="white"/></svg>');
    }

    /** --------------------- filter-increment Mobile ------------------------ **/

    .filter-increment__buttons {
        margin-top: 20px;
        text-wrap: nowrap;
    }

    .filter-increment__buttons button {
        margin: 0;
        padding: 0 0 2px 0;
        border: 0;
        width: 24px;
        height: 24px;
        border-radius: 12px;
        font-size: 20px;
        line-height: 20px;
        color: var(--tr-color-white);
        background-color: var(--tr-color-blue-100);
        text-align: center;
    }

    .filter-increment__buttons button.disabled {
        color: var(--tr-color-black);
        background-color: var(--tr-color-gray-30);
    }

    .filter-increment__buttons input {
        text-align: center;
        appearance: none;
        border: 0;
        padding-left: 20px;
        padding-right: 20px;
        width: calc(100% - 48px);
        color: var(--tr-color-black);
        background-color: transparent;
        .M-desktop
    }

    .filter-increment_disabled input {
        color: var(--tr-color-gray-70);
    }

    .filter-increment__buttons input:focus {
        outline: none;
    }

    .filter-increment__buttons input {
        -moz-appearance:textfield;
    }

    .filter-increment__buttons input::-webkit-outer-spin-button, .filter-increment__buttons input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        display: none;
        margin: 0;
    }

    /** --------------------- filter-checkset Mobile ------------------------ **/

    .filter-checkset__items {
        margin-top: 20px;
        margin-bottom: -12px;
    }

    .filter-checkset__item {
        margin-bottom: 12px;
        line-height: 20px;
        color: var(--tr-color-black);
    }

    .filter-checkset__item_disabled {
        color: var(--tr-color-gray-70);
    }

    .filter-checkset__item label {
        display: inline;
        vertical-align: middle;
        .L-regular-mobile;
    }

    .filter-checkset__item small {
        display: block;
        margin-top: 4px;
        margin-left: 28px;
        color: var(--tr-color-gray-90);
        .M-regular-mobile;
    }

    .filter-checkset__item input {
        appearance: none;
        margin-right: 8px;
        width: 20px;
        height: 20px;
        border: none;
        border-radius: 5px;
        background-color: var(--tr-color-gray-30);
        vertical-align: middle;
    }

    .filter-checkset__item input:checked {
        border: none;
        background-color: var(--tr-color-blue-100);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 10px 8px;
        background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5775 7.1675C3.3775 7.1675 3.1875 7.0875 3.0475 6.9475L0.2175 4.1175C-0.0725 3.8275 -0.0725 3.3475 0.2175 3.0575C0.5075 2.7675 0.9875 2.7675 1.2775 3.0575L3.5775 5.3575L8.7175 0.2175C9.0075 -0.0725 9.4875 -0.0725 9.7775 0.2175C10.0675 0.5075 10.0675 0.987499 9.7775 1.2775L4.1075 6.9475C3.9675 7.0875 3.7775 7.1675 3.5775 7.1675Z" fill="white"/></svg>');
    }

    /** --------------------- filter-radio Mobile ------------------------ **/

    .filter-radio__items {
        margin-top: 20px;
        margin-bottom: -12px;
    }

    .filter-radiot__item {
        margin-bottom: 12px;
        line-height: 20px;
        color: var(--tr-color-black);
    }

    .filter-radio__item_disabled {
        color: var(--tr-color-gray-70);
    }

    .filter-radio__item label {
        display: inline;
        vertical-align: middle;
        .L-regular-mobile;
    }

    .filter-radio__item small {
        display: block;
        margin-top: 4px;
        margin-left: 28px;
        color: var(--tr-color-gray-90);
        .M-regular-mobile;
    }

    .filter-radio__item input {
        margin-right: 8px;
        width: 16px;
        height: 16px;
        vertical-align: middle;
    }

}









@media (min-width: 768px) {


    /** --------------------- filter-modal Tablet ------------------------ **/

    .filters-modal {
        padding: 60px 73px 60px 73px;
        border-radius: 12px;
        z-index: 200;
    }

    .filters-modal__close {
        top: 24px;
        right: 24px;
    }

    .filters-modal__header {
        padding: 0;
    }

    .filters-modal__header h4 {
        text-transform: none;
        .H4-desktop;
    }

    .filters-modal__header button {
        .M-desktop;
    }

    .filters-modal__header button:first-of-type {
        margin-right: 20px;
    }

    .filters-modal__header-buttons {
        display: block;
    }

    .filters-modal__footer {
        display: none;
    }

    .filters-modal__body {
        margin-top: 22px;
        margin-right: -40px;
        padding-left: 0;
        padding-right: 30px;
        overflow-x: hidden;
        overflow-y: scroll;
        flex-shrink: 1;
    }

    .filters-modal__body::-webkit-scrollbar {
        width: 8px;
        right: -10px;
    }
    .filters-modal__body::-webkit-scrollbar-track {
        background-color: var(--tr-color-gray-30);
        border-radius: 10px;
    }
    .filters-modal__body::-webkit-scrollbar-thumb {
        background-color: var(--tr-color-gray-60);
        border-radius: 10px;
    }
    .filters-modal__body::-webkit-scrollbar-thumb:hover {
        background: var(--tr-color-gray-90);
    }

    .filters-modal__filter {
        padding: 20px;
        border-radius: 16px;
        background-color: var(--tr-color-gray-10);
        margin-bottom: 24px;
    }

    .filters-modal__filter .filter-checkbox {
        margin-top: 12px;
    }

    @supports (-moz-appearance: none) {
        .filters-modal__body {
            scrollbar-width: thin;
            scrollbar-color: var(--tr-color-gray-60) var(--tr-color-gray-30);
        }
    }

    /** --------------------- label Tablet ------------------------ **/

    label.filter-title {
        display: block;
        height: 20px;
        .M-medium-desktop;
    }

    label.filter-title i {
        display: inline-block;
        font-size: 20px;
        line-height: 20px;
        margin-right: 8px;
        color: var(--tr-color-blue-100);
    }

    /** --------------------- filter-select Tablet ------------------------ **/


    .filter-select select {
        margin-top: 16px;
        border-color: var(--tr-color-gray-60);
        padding: 11px 20px 11px 20px;
        .M-desktop;
    }

    .filter-select i.icon-arrow-down {
        font-size: 24px;
        bottom: 5px;
        right: 20px;
    }

    /** --------------------- filter-input-select Tablet ------------------------ **/

    .filter-input-select input {
        margin-top: 16px;
        border-color: var(--tr-color-gray-60);
        padding: 11px 20px 11px 20px;
        border-radius: 50px;
        .M-desktop;
    }

    .filter-input-select i.icon-arrow-down {
        font-size: 24px;
        bottom: 5px;
        right: 20px;
    }

    /** --------------------- filter-range Tablet ------------------------ **/

    .filter-range__inputs {
        margin-top: 16px;
        column-gap: 15px;
    }

    .filters-modal .filter-range__inputs {
        column-gap: 128px;
    }

    .filter-range__inputs input {
        height: 36px;
        border: 1px solid var(--tr-color-gray-60);
        padding: 7px;
        border-radius: 50px;
        .M-desktop;
    }

    .filter-range__inputs input:first-of-type {
        text-align: center;
    }

    .filter-range__inputs input:last-of-type {
        text-align: center;
    }

    .filter-range__inputs input:focus {
        border: 1px solid var(--tr-color-blue-100);
    }

    .filter-range__progress {
        margin-top: 14px;
        background-color: var(--tr-color-gray-50);
    }

    /** --------------------- filter-checkbox Tablet ------------------------ **/

    .filter-checkbox label {
        .M-desktop;
    }

    .filter-checkbox input {
        margin-right: 8px;
    }

    .filters-modal .filter-checkbox input {
        border: 1px solid var(--tr-color-gray-60);
        background-color: var(--tr-color-white);
    }

    .filter-checkbox input:checked {
        border: none;
        background-color: var(--tr-color-blue-100);
    }

    /** --------------------- filter-increment Tablet ------------------------ **/

    .filter-increment__buttons {
        margin-top: 20px;
    }

    .filters-modal .filter-increment__buttons button.disabled {
        background-color: var(--tr-color-gray-50);
    }

    /** --------------------- filter-checkset Tablet ------------------------ **/

    .filter-checkset__items {
        margin-top: 20px;
        margin-bottom: -10px;
    }

    .filter-checkset__item {
        margin-bottom: 10px;
    }

    .filter-checkset__item label {
        .M-desktop;
    }

    .filter-checkset__item small {
        .XS-regular-desktop;
        color: var(--tr-color-gray-90);
    }

    .filter-checkset__item input {
        background-color: var(--tr-color-gray-30);
    }

    .filters-modal .filter-checkset__item input {
        border: 1px solid var(--tr-color-gray-60);
        background-color: var(--tr-color-white);
    }

    .filter-checkset__item input:checked {
        border: none;
        background-color: var(--tr-color-blue-100);
    }

    /** --------------------- filter-radio Tablet ------------------------ **/

    .filter-radio__items {
        margin-top: 20px;
        margin-bottom: -10px;
    }

    .filter-radio__item {
        margin-bottom: 10px;
    }

    .filter-radio__item label {
        .M-desktop;
    }

    .filter-radio__item small {
        .XS-regular-desktop;
        color: var(--tr-color-gray-90);
    }

    .filter-radio__item input {
        background-color: var(--tr-color-gray-30);
    }

    .filters-modal .filter-radio__item input {
        border: 1px solid var(--tr-color-gray-60);
        background-color: var(--tr-color-white);
    }

    /** --------------------- filter-button-all Tablet ------------------------ **/

    .filter-button-all {
        width: 100%;
        .M-desktop;
    }

}