@use '../utils' as *;

/*=============================
    	14. filter
===============================*/

.tg-filter{
    &-sidebar{
        background: #f9f9f9;
        border-radius: 12px;
        padding: 27px 30px 26px 30px;
    }
    &-title{
        font-weight: 500;
        font-size: 17px;
    }
    &-seemore{
        margin-top: 4px;
        & .plus{
            border-radius: 4px;
            width: 18px;
            height: 18px;
            font-size: 12px;
            background: var(--tg-theme-primary);
            display: inline-block;
            color: var(--tg-common-white);
            text-align: center;
            line-height: 18px;
            margin-right: 7px;
            transform: translateY(-1px);
        }
        & .more{
            font-size: 15px;
            text-transform: capitalize;
            color: var(--tg-theme-primary);
        }
    }
    &-border{
        height: 1px;
        width: 100%;
        display: block;
        border: 1px solid #e4e4e4;
    }
    &-list{
        & ul{
            & li{
               &:not(:last-child){
                    margin-bottom: 4px;
               }
            }
        }
    }
    &-review{
        & span{
            font-size: 16px;
            color: #ffa500;
            &.bad-review{
                color: #a4a4a4;
            }
        }
    }
    &-price{
        &-input{
            & .dvdr{
                margin: 0 10px;
                display: inline-block;
            }
            & .input{
                border: 1px solid #e6e6e6;
                border-radius: 6px;
                height: 37px;
                padding: 13px;
                font-weight: 500;
                background: var(--tg-common-white);
                font-size: 12px;
                color: var(--tp-common-black);
                @include placeholder{
                    font-size: 12px;
                    color: var(--tp-common-black);
                }
                &:focus{
                    border-color: var(--tg-theme-primary);
                }
            }
        }
    }
    &-clear{
        font-weight: 400;
        font-size: 13px;
        text-decoration: underline;
        text-decoration-skip-ink: none;
        color: var(--tg-grey-1);
        &:hover{
            text-decoration: underline;
            text-decoration-skip-ink: none;
            color: var(--tg-theme-primary);
        }
    }
    &-booking{
        &-form{
            & .tg-booking-add-input-field {
                background: var(--tg-common-white);
                border: 1px solid var(--tg-border-3);
                border-radius: 6px;
                padding: 6px 17px;
                width: 100%;
                display: block;
            }
            & .tg-booking-add-input-date .input {
                background: var(--tg-common-white);
                border: 1px solid var(--tg-border-3);
                border-radius: 6px;
                height: 40px;
                width: 100%;
                display: block;
            }
            & .tg-booking-form-search-btn .bk-search-button {
                width: 100%;
            }
            & .tg-booking-form-location-list {
                right: -30px;
            }
        }
    }
    &-reset{
        font-weight: 400;
        font-size: 15px;
        text-transform: capitalize;
        color: var(--tg-theme-primary);
    }
    &-search{
        &-form{
            & .buttons{
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 10px;
            }
            & .input{
                font-weight: 500;
                font-size: 13px;
                color: #9e9e9e;
                border: 1px solid #dadada;
                border-radius: 6px;
                width: 100%;
                height: 40px;
                padding: 0 40px 0px 12px;
                background: var(--tg-common-white);
                &:focus{
                    border-color: var(--tg-theme-primary);
                }
                @include placeholder{
                    font-weight: 500;
                    font-size: 13px;
                    color: #9e9e9e;
                }
            }
        }
    }
}

.tg-checkbox{
    margin: 0;
    appearance: none;
    -moz-appearance: none;
    display: block;
    border-radius: 4px;
    width: 18px;
    height: 18px;
    border: 1px solid #c2c2c2;
    outline: none;
    flex : 0 0 auto;
    box-shadow: inset 0 1px 4px 0 rgba(48, 54, 81, 0.06), 0 1px 1px 0 rgba(48, 54, 81, 0.06);
    background: var(--tg-common-white);
    @include transform(translateY(4px));
    padding: 0;
    margin-right: 10px;
    &:checked{
      position: relative;
      background-color: var(--tg-theme-primary);
      border-color: var(--tg-theme-primary);
      &::after{
        box-sizing: border-box;
        position: absolute;
        content: '\f00c';
        font-weight: 700;
        font-family: var(--tg-ff-fontawesome);
        font-size: 11px;
        color: var(--tg-common-white);
        top: 50%;
        left: 50%;
        @include transform(translate(-50%, -50%));       
      }
    }
    &:hover{
      cursor: pointer;
    }
}
.tg-label{
    font-size: 15px;
    text-transform: capitalize;
    color: var(--tg-common-black);
}