$gap: 1.5ex;

$max-width-s: 8em;
$max-width-m: 48em;
$max-width-l: 100%;

form.default {
    div.select2-wrapper {
        display: block ! important;
        text-indent: 0;
    }

    section {
        &:not(.contentbox) {
            padding-top: $gap;

            label:first-of-type {
                margin-top: 0;
            }
        }
    }

    fieldset > section:last-child {
        margin-bottom: $gap;
    }

    ol.default {
        padding-left: 20px;

        li {
            padding: 2px 0;
        }
    }

    span.empty {
        color: var(--light-gray-color-40);
        font-style: italic;
    }

    input[type=date], input[type=datetime-local], input[type=email], input[type=number],
    input[type=password], input[type=text], input[type=time], input[type=url], input[type=tel],
    textarea, select {
        box-sizing: border-box;
        border: 1px solid var(--light-gray-color-40);
        border-radius: var(--border-radius-default);
        color: var(--color--font-primary);
        max-width: $max-width-m;
        padding: 5px;
        vertical-align: middle;
        width: 100%;
        transition: background-color var(--transition-duration) ease-out,
                    border-color var(--transition-duration) ease-out;

        &:focus {
            border-color: var(--brand-color-dark);
        }

        &.size-s {
            max-width: $max-width-s;
        }

        &.size-m {
        }

        &.size-l {
            max-width: $max-width-l;
        }

        &[readonly] {
            background-color: var(--light-gray-color-20);
        }

        &[disabled] {
            background-color: var(--dark-gray-color-15);
        }
    }

    .ck-source-editing-area textarea {
        max-width: unset;
    }

    input[list] {
        @include icon(before, arr_1down, $padding: 4px, $align: middle);
    }

    textarea:not(.size-l) + .ck-editor {
        max-width: $max-width-m;

        .ck-toolbar__grouped-dropdown {
            .ck-toolbar {
                max-width: calc($max-width-m - 2px);
            }
        }
    }

    .quicksearch_container {
        max-width: $max-width-m;
    }

    input[type=date].hasDatepicker, input[type=date][data-date-picker], input[type=number], input[type=time], input[type=tel]:not(.size-m)  {
        max-width: $max-width-s;
    }

    input[type=date]:not(.hasDatepicker, [data-date-picker]) {
        max-width: $max-width-m;
    }

    textarea {
        min-height: 6em;
    }

    label:not(.undecorated, .ck-voice-label) {
        display: block;
        margin-bottom: $gap;
        max-width: 100%;
        text-indent: 0.25ex;
        vertical-align: top;

        input[type=date], input[type=email], input[type=number],
        input[type=password], input[type=text], input[type=time], input[type=tel], input[type=url], input[type=color],
        textarea, select, .ck.ck-editor {
            display: block;
            margin-top: 0.5ex;
        }

        .ck-editor {
            text-indent: initial;
        }

        .ck-source-editing-area textarea {
            margin-top: 0;
        }
    }

    .formpart {
        display: block;
        margin-bottom: $gap;

        output.calculator_result {
            display: block;
            margin-top: 2.3ex;
        }
    }
    .editablelist {
        margin-bottom: $gap;
        > li {
            margin-bottom: 10px;
            &:last-child {
                margin-bottom: 0;
            }
        }
    }


    .label-text {
        display: inline-block;
        text-indent: 0.25ex;
    }

    /* we have to use specific css selectors, otherwise the settings are
       overwritten by other rules  */
    @for $i from 1 through 5 {
        label,
        div,
        section {
            &.col-#{$i} {
                display: inline-block;
                padding-right: 1em;
                vertical-align: top;
                word-break: break-all;

                .studip-v-select {
                    .vs__dropdown-toggle {
                        padding-bottom: 2px;
                    }
                    margin-top: 3px;
                }
            }
        }

        div,
        section {
            &.col-#{$i} {
                label {
                    margin-bottom: 0;
                }
            }
        }
    }

    label,
    div,
    section {
        &.col-1 {
            width: 14%;
        }
        &.col-2 {
            width: 29%;
        }
        &.col-3 {
            width: 45%;
        }
        &.col-4 {
            width: 60%;
        }
        &.col-5 {
            width: 75%;
        }
    }

    fieldset:not(.undecorated) {
        box-sizing: border-box;
        border: solid 1px var(--color--fieldset-border);
        margin: 0 0 15px;
        min-width: auto;
        padding: 0 10px 10px 10px;

        > legend {
            box-sizing: border-box;
            background-color: var(--color--fieldset-header);
            border: solid 1px var(--color--fieldset-border);
            border-bottom: 0;
            font-size: $font-size-h3;
            padding: 10px;
            margin: 0 0 10px -11px;
            width: calc(100% + 22px);
            color: var(--color--font-primary);
        }

        // Insert invisible element that corrects double padding/margin at the
        // bottom
        &:not(.collapsed) > label:last-child::after {
            content: '';
            display: block;
            margin-top: -$gap;
        }
    }

    fieldset.undecorated {
        border: none;
        margin: 0;
        padding: 0;

        > legend {
            margin-bottom: 0.5ex;
        }
    }

    .selectbox {
        padding: 5px;
        max-height: 200px;
        overflow:auto;

        > fieldset {
            border: none;
            margin: 0;
            padding: 0;
        }
    }

    .required {
        font-weight: bold;
        &::after {
            content: "*";
            color: var(--red);
        }
    }
    .studiprequired {
        font-weight: bold;
        .asterisk {
            color: var(--red);
        }
    }

    .tooltip.tooltip-icon::before {
        vertical-align: text-bottom;
    }

    footer {
        background-color: var(--dark-gray-color-10);
        clear: both;
        margin-left: 0;
        padding: 5px 10px;

        .button {
            margin-bottom: 0;
            margin-top: 0;
        }
    }

    // Special inputs

    label.file-upload {
        @include icon(before, upload, $size: 20px, $padding: 4px, $align: top);
        cursor: pointer;
        color: var(--base-color);

        input[type=file] {
            display: none;
        }
        .filename {
            padding-left: 0.5em;
            color: var(--light-gray-color-80);
        }
    }

    label.with-action {
        span:first-of-type {
            display: block;
        }

        > input[type=image], > img {
            vertical-align: text-bottom;
            margin-left: 5px;
        }

        input[type=date], input[type=email], input[type=number],
        input[type=password], input[type=text], input[type=time], input[type=url], input[type=tel],
        textarea, select {
            max-width: calc($max-width-m - 2em);
            width: calc(100% - 2em);
            display: inline-block;

            transition: all var(--transition-duration) ease-out;

            &:focus {
                border-color: var(--brand-color-dark);
            }

            &.size-s {
                max-width: calc($max-width-s - 2em);
            }

            &.size-m {
            }

            &.size-l {
                max-width: calc($max-width-l - 2em);
            }
        }
    }

    // Group elements in a row
    .hgroup,
    .hgroup-btn {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5ex;
        align-items: center;
        max-width: $max-width-m;

        &.size-s {
            max-width: $max-width-s;
        }
        &.size-l {
            max-width: $max-width-l;
        }

        > * {
            box-sizing: border-box;
            flex: 1 0 auto;
            max-width: 400px;

            &:not(:first-child) {
                margin-left: 3px;
            }
            &:not(:last-child) {
                margin-right: 3px;
            }
        }

        label {
            margin-top: 0;
        }

        &, label:not(.undecorated) {
            input[type=date], input[type=email], input[type=number],
            input[type=password], input[type=text], input[type=time], input[type=tel], input[type=url],
            textarea, select {
                display: inline-block;
                margin-top: 0;
                width: auto;
            }
            .quicksearch_container input {
                width: 100%;
            }
        }

        .button {
            margin-bottom: 0;
            margin-top: 0;
        }
    }

    .hgroup-btn {
        align-items: baseline;
        .form-control {
            flex: 1;
        }
        .button {
            flex: 0;
        }
    }

    // Collapsable fieldsets
    .js &.collapsable fieldset,
    fieldset.collapsable {
        > legend {
            box-sizing: border-box;
            @include icon(before, arr_1down, $align: middle, $padding: 4px);
            cursor: pointer;
        }

        &.collapsed {
            > legend {
                @include icon(before, arr_1right, $align: middle, $padding: 4px);
                margin-bottom: 0;
            }
            padding-bottom: 0;
            padding-top: 0;
            > *:not(legend) {
                display: none;
            }
        }
    }

    // Length hint display for input[maxlength]
    .length-hint-wrapper {
        position: relative;
        white-space: nowrap;
    }
    .length-hint {
        position: absolute;
        bottom: 100%;
        right: 0;

        color: var(--light-gray-color);
        font-size: 0.8em;
    }

    // Display small forms as inline
    &.inline {
        label {
            display: inline;
            max-width: inherit;
            vertical-align: middle;
            width: auto;
        }
        input, textarea, select, button {
            display: inline-block;
        }
    }

    label.packed {
        display: flex;

        > * {
            flex: 1;
            max-width: none;
        }
        button {
            flex: 0 0 auto;
            margin: 0;
        }
    }

    .invalid {
        border: 2px dotted var(--red) ! important;
    } // an invalid form entry

    .invalid_message {
        display: none;
        font-weight: bold;
        color: var(--red);
    }

    .select2-container {
        margin-top: 0.5ex;
    }

    // hidden radio buttons with icon:

    input[type="radio"].hidden-checkbox, input[type="checkbox"].hidden-checkbox {
        display:none;

        & + label {
            cursor: pointer;

            & .hidden-content {
                cursor: initial;
            }

            & .hidden-checkbox-checked-icon {
                display: inline;
                visibility: hidden;
            }

            & .hidden-content {
                display: none;
            }
        }

        &:checked + label {
            & .hidden-checkbox-checked-icon {
                visibility: visible;
            }

            & .hidden-content {
                display: block;
            }
        }
    }

    .validation_notes_icon {
        position: relative;
        top: -2px;
    }

    &.show_validation_hints {
        :invalid, .invalid {
           @include icon(before, exclaim-circle, attention, $padding: 5px);
            display: inline-block;
        }
        textarea:invalid, input[type=text]:invalid {
            border-left: 4px solid var(--red);
        }
    }

    // designing vue-select in studipform:
    .vs__dropdown-toggle {
        border-radius: var(--border-radius-default);
    }
    .vs__selected {
        border-radius: var(--border-radius-default);
        padding: 5px;
    }

    .range_input {
        display: flex;
        align-items: center;
        input[type=range] {
            &::-moz-range-track {
                height: 11px;
                border: 1px solid var(--content-color);
                background-color: transparent;
            }
            &::-moz-range-progress {
                background-color: var(--base-color);
                height: 11px;
            }
            &::-moz-range-thumb {
                border-radius: 0;
                width: 1.2em;
                height: 1.2em;
            }
            &::-moz-range-thumb:hover {
                background-color: var(--content-color);
            }
        }
        output {
            margin-left: 10px;
        }
    }

    .input-with-icon {
        input {
            display: inline;
            width: calc(100% - 24px);
        }
        div.icon {
            height: 2em;
            margin-top: 1ex;
            color: var(--color--highlight);
        }
    }
    .multiquicksearch > li {
        display: flex;
        align-items: center;
        a.delete_item {
            margin-left: 5px;
        }
    }

    .indented {
        margin-left: 1.5em;
    }
}

form.narrow {
    label.col-1, label.col-2, label.col-3, label.col-4, label.col-5,
    div.col-1, div.col-2, div.col-3, div.col-4, div.col-5,
    section.col-1, section.col-2, section.col-3, section.col-4, section.col-5
    {
        padding-right: 0;
    }
}

// give forms some optimized styling for very narrow screen sizes
@include media-breakpoint-tiny-down{
    form.default {
        label.col-1, div.col-1, section.col-1,
        label.col-2, div.col-2, section.col-2,
        label.col-3, div.col-3, section.col-3,
        label.col-4, div.col-4, section.col-4,
        label.col-5, div.col-5, section.col-5 {
            min-width: 100%;
        }
    }
}

.content-title {
    background-color: transparent;
    padding-top: 0;
    color: var(--base-gray);
    font-size: 1.4em;
    text-align: left;
}

@media (max-width: 580px) {
    .ms-selectable,
    .ms-selection {
        width: 100% ! important;
    }
}

// Adjustments for dialog
.ui-dialog {
    form.default > fieldset:first-of-type:last-of-type {
        border: 0;
        padding: 0;

        legend {
            display: none;
        }
    }
}

form.inline {
    display: inline;
    input.icon-role-clickable {
        cursor: pointer;
    }
}

.studip-dialog {
    > .ui-dialog-content > [data-vue-app],
    &.no-default-buttons .ui-dialog-content {
        min-height: 100%;
        display: flex;
        flex-direction: column;

        > * {
            flex: 1;
        }

        form {
            display: flex;
            flex-direction: column;
            min-height: 100%;

            > :not(footer[data-dialog-button]) {
                flex: 0;

                &:last-of-type {
                    margin-bottom: auto;
                }
            }

            footer[data-dialog-button] {
                background: var(--white);
                border-top-color: var(--base-color-20);
                bottom: 0;
                margin-top: auto;
                padding: 0.5em 0;
                position: sticky;
                text-align: center;
                z-index: 2;
            }
        }
    }
}

@media (min-width: 800px) {
    form.default .form-columns {
        display: flex;
        flex-direction: row;

        .column {
            flex-grow: 1;
            margin-right: 1em;
        }
    }
}