// element-rule



.element-rule{
    padding: 0 32px 24px;
    &_slider{
        user-select: none;
        @media (max-width: @mobile){
            display: none;
        }
    }
    &_expand-link{
        font-size: 18px;
        line-height: 1.2;
        font-weight: 700;
        cursor: pointer;
        padding: 8px 0;
        display: flex;
        column-gap: 4px;
        &_txt{
            display: inline-block;
            vertical-align: top;
            padding: 1px 0;
        }
        &_arr{
            display: inline-block;
            vertical-align: top;
            width: 24px;
            height: 24px;
            transition: color .3s ease, transform .3s ease;
            line-height: 1;
            .element-rule_expand-link.active & {
                transform: rotate(180deg);
            }
        }
    }
    &_form{
        display: none;
        &.open{
            display: block;
        }
    }
    &_fieldset{
        padding: 8px 0;
    }
    &_more--mobile {
        display: none;
        @media (max-width: @mobile) {
            display: block;
            .element-rule_expand-link {
                display: none;
            }
            #adg-cancel {
                width: 106px;
                padding: 10px 7px;
            }

            #adg-accept {
                padding: 10px 6px;
            }
        }
    }
    &_text {
        font-size: 16px;
        line-height: 1.5;
    }
}


// slider
.adg-slide{
    display: flex;
    padding: 16px 0;

    &_clue {
        padding: 9px 0;
        font-size: 18px;
        font-weight: 700;
        cursor: pointer;
        line-height: 1.2;

        &--min {
            order: 1;
        }

        &--max {
            order: 3;
        }
    }

    &_track {
        order: 2;
        flex: 1 1 auto;
        position: relative;
        display: flex;
        justify-content: space-between;
        column-gap: 4px;
        padding: 18px 28px;
        cursor: pointer;
        touch-action: none;
    }

    &_tick {
        flex: 1 1 auto;
        width: auto;
        height: 4px;
        pointer-events: none;
    }

    &_handle {
        position: absolute;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.20), 2px 2px 4px rgba(0, 0, 0, 0.10);
        pointer-events: none;
    }
}

.adg-slide-btns{
    display: none;
}

.adg-slide-btn{
    position: relative;
    width: 36px;
    height: 36px;
    border: 2px solid #e2e2e2;
    border-radius: 2px;
    &:after{
        content: "";
        position: absolute;
        left: 8px;
        top: 15.3px;
        width: 18px;
        height: 2px;
        background-color: #4e4e4e;
        border-radius: 2px;
    }
    &--plus{
        margin-left: 9px;
        &:before{
            content: "";
            position: absolute;
            left: 16px;
            top: 8px;
            height: 17px;
            width: 2px;
            background-color: #4e4e4e;
            border-radius: 2px;
        }
    }
}
// /slider
