_layout.scss

@include exports("forms/layout") {

    // Common
    .k-form,
    .k-form-inline {
        font-size: $form-font-size;
        line-height: $form-line-height;
    }


    // Fieldset
    .k-fieldset {
        margin: $fieldset-margin;
        border-width: 1px 0 0;
        border-style: solid;
        padding: 25px 0 0;

        > legend {
            margin-left: 0;
            padding: 0 $padding-x 0 0;
            text-transform: uppercase;
        }
    }


    // Label
    kendo-label > .k-label {
        margin: 0;
    }

    .k-label-optional {
        margin-left: $label-optional-margin-x;
        font-size: $label-optional-font-size;
        font-style: $label-optional-font-style;
        align-self: center;
    }

    .k-label-empty {
        &::before {
            content: "";
            display: inline-block;
        }
    }

    .k-input-label {
        margin-right: $horizontal-form-label-margin-x;
        z-index: 1;

        &:dir(rtl),
        .k-rtl &,
        &.k-rtl,
        [dir="rtl"] &,
        &[dir="rtl"] {
            margin-right: 0;
            margin-left: $horizontal-form-label-margin-x;
        }
    }


    // Vertical Form
    .k-form {
        border: 0;

        .k-label,
        kendo-label,
        .k-form-label {
            margin-bottom: $form-label-margin-bottom;
            display: flex;
            flex-flow: row nowrap;
        }

        .k-label + .k-radio {
            margin-left: 0;
        }

        .k-form-fieldset {
            margin: $form-fieldset-margin;
            padding: $form-fieldset-padding;
            border: 0;

            > * {
                &:not(.k-hidden):first-child,
                &.k-hidden + :not(.k-hidden) {
                    margin-top: 0;
                }
            }
        }

        .k-form-legend {
            margin: $form-legend-margin;
            padding: $form-legend-padding;
            border-width: $form-legend-border-width;
            border-style: $form-legend-border-style;
            width: $form-legend-width;
            font-size: $form-legend-font-size;
            text-transform: $form-legend-text-transform;
        }


        // Form group
        .k-form-group {
            padding: 0;
        }

        .k-form-field {
            margin-top: $form-field-margin-top;
        }

        > * {
            &:not(.k-hidden):first-child,
            &.k-hidden + :not(.k-hidden) {
                margin-top: 0;
            }
        }


        // Form field
        .k-form-field,
        .k-form-field-wrap {
            display: block;
        }

        .k-form-field-disabled {
            .k-label,
            .k-form-label {
                @include disabled( $disabled-styling );
            }
        }

        .k-alert-error {
            font-size: $font-size-sm;
            margin-top: $padding-y * 2;
        }

        .k-field-info {
            display: inline-block;
            font-size: $font-size-xs;
            line-height: 1;
            margin: 0 $padding-x;
        }


        .k-autocomplete,
        .k-combobox,
        .k-dropdown,
        .k-multiselect,
        .k-dateinput,
        .k-datepicker,
        .k-datetimepicker,
        .k-timepicker,
        .k-maskedtextbox,
        .k-floating-label-container {
            display: inline-flex;
            width: 100%;
        }
        .k-daterangepicker {
            width: 100%;
            flex-flow: column nowrap;
            gap: 0;
        }
    }

    // Form Buttons Container
    .k-form-buttons {
        @extend .k-actions;
        margin-top: 2 * $form-field-margin-top;
        padding: 0;
    }

    // Form Hint/Error Messages
    .k-form-hint,
    .k-form-error {
        margin-top: $form-hint-margin-top;
        display: flex;
        font-size: $form-hint-font-size;
        font-style: $form-hint-font-style;
    }

    .k-text-start,
    .k-buttons-start {
        justify-content: flex-start;
    }

    .k-text-end,
    .k-buttons-end {
        justify-content: flex-end;
    }

    // Form Separator
    .k-form-separator {
        margin: $form-separator-margin;
        border-width: 1px 0 0;
        border-style: solid;
        display: block;
        flex: 0 0 auto;
    }

    // Horizontal Form
    .k-form-horizontal {
        .k-form-field {
            display: flex;

            > .k-label,
            > kendo-label,
            > .k-form-label {
                margin-right: $horizontal-form-label-margin-x;
                padding-top: $horizontal-form-label-padding-top;
                width: $horizontal-form-label-width;
                text-align: end;
                flex-direction: column;
                align-items: $horizontal-form-label-align;
                justify-content: flex-start;
            }
            .k-label-optional {
                margin: 0;
                align-self: inherit;
            }
        }

        .k-form-field-wrap {
            max-width: $horizontal-form-field-wrap-max-width;
            flex: 1 1 auto;
        }
    }

    // RTL Adjustments
    .k-form {
        [dir="rtl"],
        .k-rtl & {
            .k-label-optional {
                margin-left: 0;
                margin-right: $label-optional-margin-x;
            }
        }
    }

    .k-form-horizontal {
        [dir="rtl"],
        .k-rtl & {
            &.k-form-field,
            .k-form-field {
                > .k-label,
                > kendo-label,
                > .k-form-label {
                    margin-right: 0;
                    margin-left: $horizontal-form-label-margin-x;
                }
            }
        }
    }


    // Scheduler
    .k-form-inline {
        padding: $form-spacer;

        fieldset {
            border-width: 1px 0 0;
            border-style: solid;
            margin: ($form-spacer * 2) 0;
            padding: 0;

            &:first-child:first-of-type {
                margin-top: 0;
            }

            &:last-child:last-of-type {
                margin-bottom: 0;
            }
        }

        legend {
            font-size: $font-size-sm;
            text-align: left;
            font-weight: 600;
            line-height: 1;
            margin-bottom: $padding-y-lg * 2;
            text-transform: uppercase;
            padding: 0 $padding-x 0 0;
            width: auto;
        }

        .k-form-field {
            display: flex;
            align-items: flex-start;
            text-align: left;
            margin-bottom: $padding-y-lg * 2;

            > span:not(.k-widget) {
                width: $inline-form-element-width;
                text-align: right;
                line-height: $line-height;
                padding: calc( #{$padding-y} + #{$kendo-input-border-width} ) 0;
                padding-right: $padding-x-lg;
                align-self: center;
            }

            > input {
                align-self: center;
            }

            > input:not(.k-checkbox):not(.k-radio) {
                flex: 1 1 auto;
            }

            .k-alert-error {
                font-size: $font-size-sm;
                margin-top: $padding-y * 2;
            }

            .k-field-info {
                display: block;
                font-size: $font-size-xs;
                line-height: 1;
                margin: 0;
            }

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

}

@include exports("edit-form/layout") {

    // Edit form
    .k-edit-form-container {
        width: 400px;
        min-width: 400px;
        border-color: inherit;
        position: relative;
    }


    // Action buttons
    .k-popup-edit-form > .k-actions,
    .k-edit-form-container .k-actions {
        margin: $spacer (-$window-inner-padding-x) (-$window-inner-padding-y);
    }


    .k-edit-label {
        margin: 0 0 $spacer-y 0;
        padding: calc( #{$kendo-input-padding-y} + #{$kendo-input-border-width} ) 0;
        width: 30%;
        line-height: $form-line-height;
        text-align: right;
        float: left;
        clear: both;
    }
    .k-edit-field {
        margin: 0 0 $spacer-y 0;
        width: 65%;
        float: right;
        clear: right;
        position: relative;

        &.k-no-editor {
            padding: calc( #{$kendo-input-padding-y} + #{$kendo-input-border-width} ) 0;
        }
    }

    .k-edit-field {

        > .k-widget {
            width: 100%;
            box-sizing: border-box;
        }
        > .k-colorpicker {
            width: auto;
        }

        input[type="radio"]:not(.k-radio),
        input[type="checkbox"]:not(.k-checkbox) {
            margin-right: .4ex;
        }

        .k-radio-label,
        .k-checkbox-label {
            margin-right: ($spacer);
        }

        > .k-reset > li + li {
            margin-top: ($spacer / 2);
        }

        .k-reset .k-widget {
            margin: 0 .4ex 0 1ex;
        }
    }

}