/**
* @file _input-group.scss
* @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
* @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
* @date 16.12.2024
* @modified 09.04.2026
* @@VERSION@@
* @brief Styles für die Form Input Komponenten.
*
* Diese Datei enthält gemeinsame CSS-Regeln, um die Input Komponenten
* visuell darzustellen. Sie definiert das Grundaussehen,
* Zuständ (:hover, :focus, read-only, disabled)
*/

.kern-input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    gap: var(--kern-metric-space-x-small);
    flex-wrap: wrap;

    .kern-input-group-text {
        display: flex;
        align-items: center;
        border-radius: var(--kern-metric-border-radius-small, 2px);
        border-bottom-width: var(--kern-metric-border-width-default, 2px);
        padding-top: var(--kern-metric-space-none, 0px);
        padding-right: var(--kern-metric-space-default, 16px);
        padding-bottom: var(--kern-metric-space-none, 0px);
        padding-left: var(--kern-metric-space-default, 16px);
        border-bottom: 2px solid var(--kern-color-form-input-border-contextual, #1D2034);
        color: var(--kern-color-layout-text-muted-contextual, #51577A);
        height: var(--kern-metric-dimension-x-large, 48px);
        //flex: 1 0 auto;

        &--readonly {
            border-bottom: 1px solid var(--kern-color-layout-border-contextual, #6E7597);
            color: var(--kern-color-layout-text-muted-contextual, #51577A);
        }

        &--disabled {
            opacity: var(--kern-color-action-state-opacity-disabled, 0.4);
        }
    }

    .kern-btn {
        flex: 1 0 auto;

        .kern-label {
            margin-bottom: 0;
        }
    }

    .kern-form-input__input {
        border-radius: var(--kern-metric-border-radius-small, 2px);
        flex: 999 1 220px;
    }
}