/* ── Label ───────────────────────────────────────────────── */

.form--label {
    display: flex;
    width: max-content;
    cursor: pointer;
    color: var(--oo-color-text-subtle);
    margin-bottom: var(--oo-space-1);
}
/* Labels innerhalb von Input-Komponenten nicht klickbar */
.oo-select .form--label,
.oo-textbox .form--label,
.oo-multiselect .form--label,
.oo-datepicker .form--label {
    pointer-events: none;
}

.form--label-text {
    display: inline-block;
}

/* ── Floating Label – initiale Position (nur TextBox / DatePicker) ──────────── */

/*.oo-textbox.float-label .form--label,
.oo-datepicker.float-label .form--label {
    position: absolute;
    top: 0;
    box-sizing: border-box;
    border: var(--oo-border-width) solid transparent;
    color: var(--oo-color-text-subtle);
    cursor: default;
    transition: transform 0.25s ease, font-size 0.25s ease;
    display: flex;
    align-items: center;
}*/

.form--group.float-label .form--label {
    position: absolute;
    top: 0;
    box-sizing: border-box;
    border: var(--oo-border-width) solid transparent;
    color: var(--oo-color-text-subtle);
    cursor: default;
    transition: transform 0.25s ease, font-size 0.25s ease;
    display: flex;
    align-items: center;
}

/* Placeholder bei float-label verstecken bis Fokus */
.float-label .form--input:placeholder-shown::placeholder {
    color: transparent;
}

.float-label .form--input:focus::placeholder {
    color: var(--oo-color-text-subtle);
}
/* ── Floating Label – oben (Fokus oder befüllt) ──────────── */

/*.oo-textbox.float-label:has(.form--input:focus) .form--label,
.oo-datepicker.float-label .form--input:focus + .form--label {
    color: var(--oo-primary);
    transition: transform 0.25s ease, font-size 0.25s ease;
}*/

.form--group.float-label:has(.form--input:focus) .form--label {
    color: var(--oo-primary);
    transition: transform 0.25s ease, font-size 0.25s ease;
}

/* ── Validation ──────────────────────────────────────────── */

/*.oo-textbox.float-label:has(.input-validation-error) .form--label,
.float-label .input-validation-error + .form--label {
    color: var(--oo-danger) !important;
}*/

.form--group.float-label:has(.input-validation-error) .form--label {
    color: var(--oo-danger) !important;
}
/* ── Validation Tooltip (form--group) ────────────────────── */

.form--group:has(.invalid):hover .oo-validation-tooltip,
.form--group.invalid:hover .oo-validation-tooltip {
    display: block;
}

/* MR: gilt für alle inputs - vlt. auch Buttons?
    hier nur das absolute Minimum reingeben!
*/
.form--input,
.oo-switch,
.oo-radio-item,
.oo-checkbox,
.oo--fake-input,
.jodit-workplace,
.oo-textbox.float-label .form--label,
.oo-datepicker.float-label .form--label {
    /*font: inherit;*/
    /*min-height: var(--oo-input-min-height);*/
    color: var(--oo-color-text);
    line-height: 1.5;
}

/*.oo-textbox.float-label:has(.form--input:focus) .form--label,
    .oo-textbox.float-label:has(.form--input:not(:placeholder-shown)) .form--label,
    .oo-datepicker.float-label .form--input:focus + .form--label,
    .oo-datepicker.float-label .form--input:not(:placeholder-shown) + .form--label,
    .oo--fake-input.float-label.Focused > .form--label,
    .oo--fake-input.float-label.HasSelectedItems > .form--label {
        font-size: var(--oo-font-size-xs);
    }*/

.float--label {
    padding: 0 !important;
    background-color: none;
    /*scale: 1;*/
}

/* Floating label Zustand für:
    Textbox, Textarea, Datepicker, Select, Multiselect
*/
.form--group.float-label:has(.form--input:focus) .form--label,
.form--group.float-label:has(.form--input:not(:placeholder-shown)) .form--label,
/* select*/
.float-label .oo--fake-input.Focused .form--label,
.float-label .oo--fake-input.HasSelectedItems .form--label {
    transform: translateY(-50%);
    padding: 0 var(--oo-space-1) !important;
    background-color: var(--oo-color-surface);
    line-height: 1;
    height: auto !important;
    min-height: initial !important;
}

/*.float-label .oo--fake-input .Focused > .form--label,
.float-label .oo--fake-input .HasSelectedItems > .form--label {
    transform: translateY(-50%);
    padding: 0 var(--oo-space-1) !important;
    background-color: var(--oo-color-surface);
    left: 0.6875rem;
    height: auto !important;
    min-height: initial !important;
}*/

/*.oo-textbox.float-label:has(.form--input:focus) .form--label,
.oo-textbox.float-label:has(.form--input:not(:placeholder-shown)) .form--label,
.oo-datepicker.float-label .form--input:focus + .form--label,
.oo-datepicker.float-label .form--input:not(:placeholder-shown) + .form--label,
.oo--fake-input.float-label.Focused > .form--label,
.oo--fake-input.float-label.HasSelectedItems > .form--label {
    transform: translateY(-50%);
    padding: 0 var(--oo-space-1) !important;
    background-color: var(--oo-color-surface);
    line-height: 1;
    height: auto !important;
    min-height: initial !important;
}*/

.oo-size-xs {
    font-size: var(--oo-font-size-xs) !important;
}

    /*.oo-size-xs .form--input,
.oo-size-xs .form--label,
.oo-size-xs .oo--fake-input,
.oo-size-xs .oo-dropdown--input,
.oo-size-xs .oo-dropdown--option {
    font-size: var(--oo-font-size-xs) !important;
}*/

    .oo-size-xs .form--input,
    .oo-size-xs.float-label .form--label, /* min-height für label nur bei float-label! */
    .oo-size-xs .oo--fake-input,
    .oo-size-xs .oo-dropdown--input,
    .oo-size-xs .oo-dropdown--option {
        min-height: var(--oo-size-min-height-xs) !important;
    }

    .oo-size-xs .form--input,
    .oo-size-xs .oo--fake-input {
        /*padding: var(--oo-size-padding-xs-y) var(--oo-space-2) !important;*/
        padding: var(--oo-size-padding-xs-y) var(--oo-size-padding-xs-x) !important;
    }

    .oo-size-xs.float-label:has(.form--input:focus) .form--label,
    .oo-size-xs.float-label:has(.form--input:not(:placeholder-shown)) .form--label,
    .oo-size-xs.float-label .form--input:focus + .form--label,
    .oo-size-xs.float-label:has(.form--input:not(:placeholder-shown)) + .form--label {
        /*left: calc(var(--oo-space-2) - var(--oo-size-padding-xs-y));*/
        left: calc(var(--oo-size-padding-xs-x) - var(--oo-space-1));
        font-size: calc(var(--oo-font-size-xs) - 10%) !important;
    }

    .oo-size-xs.float-label .form--label {
        padding: 0;
        /*left: var(--oo-space-2);*/
        left: var(--oo-size-padding-xs-x);
    }

.oo-size-sm {
    font-size: var(--oo-font-size-sm) !important;
}

    /*.oo-size-sm .form--input,
.oo-size-sm .form--label,
.oo-size-sm .oo--fake-input,
.oo-size-sm .oo-dropdown--input,
.oo-size-sm .oo-dropdown--option {
    font-size: var(--oo-font-size-sm) !important;
}*/

    .oo-size-sm .form--input,
    .oo-size-sm.float-label .form--label, /* min-height für label nur bei float-label! */
    .oo-size-sm .oo--fake-input,
    .oo-size-sm .oo-dropdown--input,
    .oo-size-sm .oo-dropdown--option {
        min-height: var(--oo-size-min-height-sm) !important;
    }

    .oo-size-sm .form--input,
    .oo-size-sm .oo--fake-input {
        /*padding: var(--oo-space-1) var(--oo-space-3) !important;*/
        padding: var(--oo-size-padding-sm-y) var(--oo-size-padding-sm-x) !important;
    }

    .oo-size-sm.float-label:has(.form--input:focus) .form--label,
    .oo-size-sm.float-label:has(.form--input:not(:placeholder-shown)) .form--label,
    .oo-size-sm.float-label .form--input:focus + .form--label,
    .oo-size-sm.float-label:has(.form--input:not(:placeholder-shown)) + .form--label {
        /*left: calc(var(--oo-space-3) - var(--oo-space-1));*/
        left: calc(var(--oo-size-padding-sm-x) - var(--oo-space-1));
        font-size: calc(var(--oo-font-size-sm) - 10%) !important;
    }

    .oo-size-sm.float-label .form--label {
        left: var(--oo-size-padding-sm-x);
    }

.oo-size-md {
    font-size: var(--oo-font-size-md) !important;
}

    /*.oo-size-md .form--input,
.oo-size-md .form--label,
.oo-size-md .oo--fake-input,
.oo-size-md .oo-dropdown--input,
.oo-size-md .oo-dropdown--option {
    font-size: var(--oo-font-size-md) !important;
}*/

    .oo-size-md .form--input,
    .oo-size-md.float-label .form--label, /* min-height für label nur bei float-label! */
    .oo-size-md .oo--fake-input,
    .oo-size-md .oo-dropdown--input,
    .oo-size-md .oo-dropdown--option {
        min-height: var(--oo-size-min-height-md) !important;
    }

    .oo-size-md .form--input,
    .oo-size-md .oo--fake-input {
        /*padding: var(--oo-space-2) var(--oo-space-4) !important;*/
        padding: var(--oo-size-padding-md-y) var(--oo-size-padding-md-x) !important;
    }

    .oo-size-md.float-label:has(.form--input:focus) .form--label,
    .oo-size-md.float-label:has(.form--input:not(:placeholder-shown)) .form--label,
    .oo-size-md.float-label .form--input:focus + .form--label,
    .oo-size-md.float-label:has(.form--input:not(:placeholder-shown)) + .form--label {
        /*left: calc(var(--oo-space-4) - var(--oo-space-1));*/
        left: calc(var(--oo-size-padding-md-x) - var(--oo-space-1));
        font-size: calc(var(--oo-font-size-md) - 10%) !important;
    }

    .oo-size-md.float-label .form--label {
        left: var(--oo-size-padding-md-x);
    }

.oo-size-lg {
    font-size: var(--oo-font-size-lg) !important;
}

    /*.oo-size-lg .form--input,
.oo-size-lg .form--label,
.oo-size-lg .oo--fake-input,
.oo-size-lg .oo-dropdown--input,
.oo-size-lg .oo-dropdown--option {
    font-size: var(--oo-font-size-lg) !important;
}*/

    .oo-size-lg .form--input,
    .oo-size-lg.float-label .form--label, /* min-height für label nur bei float-label! */
    .oo-size-lg .oo--fake-input,
    .oo-size-lg .oo-dropdown--input,
    .oo-size-lg .oo-dropdown--option {
        min-height: var(--oo-size-min-height-lg) !important;
    }

    .oo-size-lg .form--input,
    .oo-size-lg .oo--fake-input {
        /*padding: var(--oo-space-3) var(--oo-space-5) !important;*/
        padding: var(--oo-size-padding-lg-y) var(--oo-size-padding-lg-x) !important;
    }

    .oo-size-lg.float-label:has(.form--input:focus) .form--label,
    .oo-size-lg.float-label:has(.form--input:not(:placeholder-shown)) .form--label,
    .oo-size-lg.float-label .form--input:focus + .form--label,
    .oo-size-lg.float-label:has(.form--input:not(:placeholder-shown)) + .form--label {
        /*left: calc(var(--oo-space-5) - var(--oo-space-1));*/
        left: calc(var(--oo-size-padding-lg-x) - var(--oo-space-1));
        font-size: calc(var(--oo-font-size-lg) - 10%) !important;
    }

    .oo-size-lg.float-label .form--label {
        left: var(--oo-size-padding-lg-x);
    }

    /*.oo-size-xl .form--input,
.oo-size-xl .form--label,
.oo-size-xl .oo--fake-input,
.oo-size-xl .oo-dropdown--input,
.oo-size-xl .oo-dropdown--option {
    font-size: var(--oo-font-size-xl) !important;
}*/

    .oo-size-xl .form--input,
    .oo-size-xl.float-label .form--label, /* min-height für label nur bei float-label! */
    .oo-size-xl .oo--fake-input,
    .oo-size-xl .oo-dropdown--input,
    .oo-size-xl .oo-dropdown--option {
        min-height: var(--oo-size-min-height-xl) !important;
    }

.oo-size-xl .form--input,
.oo-size-xl .oo--fake-input {
    /*padding: var(--oo-space-4) var(--oo-space-6) !important;*/
    padding: var(--oo-size-padding-lg-y) var(--oo-size-padding-lg-x) !important;
}

.oo-size-xl.float-label:has(.form--input:focus) .form--label,
.oo-size-xl.float-label:has(.form--input:not(:placeholder-shown)) .form--label,
.oo-size-xl.float-label .form--input:focus + .form--label,
.oo-size-xl.float-label:has(.form--input:not(:placeholder-shown)) + .form--label {
    /*left: calc(var(--oo-space-6) - var(--oo-space-1));*/
    left: calc(var(--oo-size-padding-xl-x) - var(--oo-space-1));
    font-size: calc(var(--oo-font-size-xl) - 10%) !important;
}

.oo-size-xl.float-label .form--label {
    left: var(--oo-size-padding-xl-x);
}

.oo-size-xl {
    font-size: var(--oo-font-size-xl) !important;
}


a:not(.no-color),
a:link:not(.no-color),
a:visited:not(.no-color),
a:active:not(.no-color),
a:focus:not(.no-color) {
    color: var(--oo-primary);
}

    a:not(.no-color):hover {
        color: var(--oo-primary-darker);
    }