@mixin styled-form-group($primary-color) {

    .form-control,
    .custom-select {
        background-color: $input-background;
        color: darken($primary-color, 20);
        border-color: rgba($primary-color, 0.1);

        &:focus {
            border-color: $primary-color;
            box-shadow: 0 0 0 0.25rem rgba($primary-color, 0.4);
            background-color: rgb($primary-color, 0.2);
        }
    }
}

.form-group {
    padding: 0.5rem;

    &.warning {
        @include styled-form-group(rgb(255, 60, 0.5));
    }

    &.updated {
        @include styled-form-group(green);
    }

    &.hidden {
        display: none;
    }
}

.input-group-text {
    background-color: rgb(white, 0.1);
}

.form-control,
.custom-select,
.form-control:disabled,
.form-control[readonly] {
    background-color: $input-background;
    font-size: 0.9rem;
    padding: 0.25rem 0.5rem 0.15rem;
    border-color: $input-border;

    &:focus {
        border-color: $input-border;
        //box-shadow: 0 0 0 0.25rem rgba($highlight-color, 0.2);
        background-color: rgba($highlight-color, 0.2)
    }

    &.inputstate-invalid{
        background-color: rgb(255, 212, 162);
    }
    &.inputstate-valid{
        background-color: rgb(164, 255, 192);
    }
}

select.formcontrol.changed-input{
    background-color: red;
}

.radio_circle {
    width: 2rem;
}

input[type=radio] {
    width: 1rem;
    height: 1rem;
}

.radio-group {
    border: 1px solid rgba($primary-color, 0.2);
    padding: 0.6rem 1rem;
    border-radius: 0.5rem;
    background-color: $input-background;

    label {
        font-weight: 400;
    }
}

.slider {
    //-webkit-appearance: none;
    width: 100%;
    height: 50px;
    border-radius: 3px;
    background: rgb($primary-color, 0.4);
    outline: none;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: $color-dark;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: $color-dark;
    cursor: pointer;
}

// radio list

.radiolist {
    padding: 0.2rem 0;
}

.radiolistitem+.radiolistitem {
    border-top: 1px solid rgb(201, 201, 201);
}

.input-label {
    font-size: 0.9rem;
    color: $primary-color;
}

label {
    font-size: 0.9rem;
    color: $color-dark;
    font-weight: 600;
    margin-bottom: 0.1rem;
}

.update-state-text {
    font-size: 0.8rem;
    font-weight: 600;
}

.form-section {
    padding: 1rem 0;
    .form-section-title{
        font-size: 1.2rem;
        color: $primary-color;
        font-weight: 600;
        margin-bottom: 1rem;
    }
    &:not(:last-child){
        border-bottom: 2px dashed rgb(216, 216, 216);
    }
}

.radio-group-labels {

    .form-check {
        padding-left: 0;
        padding-right: 0.3rem;
    }

    .form-check-label {
        background-color: rgb(240, 240, 240);
        width: 100%;
        padding: 0.1rem;
        border-radius: 0.25rem;
        cursor: pointer;
    }

    input[type="radio"] {
        display: none;

        &:checked+label {
            background-color: rgb(252, 252, 163);
        }
    }
}

.task-state{
    transform: scale(1.6);
    accent-color: $primary-color;
}