$kbq-form-label-width: 194px;

%small {
    min-width: 80px;
    max-width: 80px;
}

%medium {
    min-width: 100px;
    max-width: 100px;
}

%large {
    min-width: 200px;
    max-width: 200px;
}

%extra-large {
    min-width: 576px;
    max-width: 576px;
}

@mixin kbq-form-extend {
    $parent-selector: &;

    margin-top: 0;

    &__row {
        &_without-controls {
            #{$parent-selector}__label,
            #{$parent-selector}__pseudo-label,
            #{$parent-selector}__constant,
            #{$parent-selector}__time-divider {
                padding-top: 0;
            }
        }
    }

    &__row:not(.kbq-form-row_margin, :last-child) {
        margin-bottom: var(--kbq-size-s);
    }

    &__pseudo-label {
        margin-right: var(--kbq-size-xxs);
    }

    &__constant,
    &__link {
        margin-left: var(--kbq-forms-size-horizontal-control-padding-left, 16px);
    }

    &__time-divider {
        margin: 0 var(--kbq-size-s);
    }

    &__pseudo-label,
    &__constant,
    &__time-divider {
        padding-top: var(--kbq-forms-size-horizontal-label-padding-top, 6px);
    }

    &__label {
        min-width: var(--ic-form-label-min-wdith, $kbq-form-label-width);
    }

    &__button {
        width: fit-content;
    }

    &__label + &__button {
        margin-left: var(--kbq-forms-size-horizontal-control-padding-left, 16px);
    }

    &__control {
        margin-left: var(--kbq-forms-size-horizontal-control-padding-left, 16px);
        padding-left: 0 !important;

        &_timezone {
            @extend %medium;

            margin-left: var(--kbq-size-s);
        }

        &_small {
            @extend %small;
        }

        &_medium {
            @extend %medium;
        }

        &_large {
            @extend %large;
        }

        &_extra-large {
            @extend %extra-large;
        }

        // deprecate
        &__extra-large {
            @extend %extra-large;
        }
    }

    &__control + &__control {
        &_timezone {
            margin-left: var(--kbq-size-s);
        }
    }

    &__time-divider + &__control,
    &__pseudo-label + &__control,
    &__control:not(.kbq-group-item) + &__control:not(.kbq-group-item, &__control_timezone, &__control_remove) {
        margin-left: 0;
    }

    &__control-suffix {
        margin-left: var(--kbq-size-s);
        padding-top: var(--kbq-forms-size-horizontal-label-padding-top, 6px);
    }

    kbq-radio-group {
        margin-left: var(--kbq-forms-size-horizontal-control-padding-left, 16px);
        padding-top: var(--kbq-forms-size-horizontal-label-padding-top, 6px);
    }
}

@mixin kbq-custom-form-control {
    kbq-form-field {
        border-radius: inherit;
    }

    :host::ng-deep {
        .kbq-form-field__container {
            border-radius: inherit;
        }
    }
}