/* 
*/
.bd-form {
    margin: 1rem 1rem 0 1rem;
}

.bd-form-inline {
    display: flex;
    flex-wrap: wrap;
}

.bd-form-row {
    margin-bottom: 1rem;
    @include marginEnd(1rem);

    .bd-error {
        margin-top: 0.25rem;
    }

    .form-label {
        display: block;
    }

    .switch.dense {
        .switch-thumb:before {
            left: 8px;
            right: 8px;
            top: 8px;
            bottom: 8px;
        }
        & input + span + span {
            width: 32px;
            height: 32px;
        }
    }
}

/*******************/
.form-bottom-border {
    .form-control,
    .form-select {
        border-width: 0;
        border-bottom-width: 1px;
        border-radius: 0;
    }
}

/*******************/
.form-floating {
    & > .form-control,
    & > .form-select {
        height: auto;
        padding-top: 1.5rem !important;
        padding-bottom: 0.5rem !important;
        line-height: 1.3;
    }

    & > label {
        opacity: 0.65;
        padding: 0;
        margin: 0;
        border: none;
        line-height: 1;
        height: auto;
        top: calc(1rem + 1px);
        @include positionStart(0.75rem);
    }

    &.has-icon {
        .form-control,
        .form-select {
            @include paddingStart(calc(1.5rem + 24px));
        }

        & > svg {
            position: absolute;
            margin: 0.75rem;
            top: 2px;
        }

        & > label {
            @include positionStart(calc(1.5rem + 24px));
        }
    }

    & > .form-control:focus,
    & > .form-control:not(:placeholder-shown),
    & > .form-select {
        ~ label {
            top: 0.95rem;
        }
    }
    & > .form-control:-webkit-autofill {
        ~ label {
            top: 0.95rem;
        }
    }
}

/*
 *
 *
 */
.form-floating.bd-compact {
    & > .form-control,
    & > .form-select {
        height: auto;
        padding-top: 0.75rem !important;
        padding-bottom: 0.6rem !important;
        line-height: 1.3;
    }

    label {
        opacity: 0.65;
        padding: 2px 4px;
        margin: -2px;
        border: none;
        line-height: 1;
        height: auto;
        top: calc(1rem - 2px);
        transition: all 0.1s ease-in-out;
    }

    &.has-icon {
        svg {
            top: 0;
            margin: 0.5rem;
        }

        & > .form-control,
        & > .form-select {
            @include paddingStart(calc(1rem + 24px));
        }

        & > label {
            @include positionStart(calc(1rem + 24px));
        }
    }

    & > .form-control,
    & > .form-select {
        height: auto;
    }

    & > .form-control:focus,
    & > .form-control:not(:placeholder-shown),
    & > .form-select {
        ~ label {
            opacity: 1;
            border-radius: 6px;
            top: 1px;
            @include positionStart(0.75rem);
        }
    }

    & > .form-control:-webkit-autofill {
        ~ label {
            opacity: 1;
            border-radius: 6px;
            top: 1px;
            @include positionStart(0.75rem);
        }
    }
}

/*******************/
@mixin form-theme($palette, $light-theme) {
    $text-primary: map-deep-get($palette, text, primary);
    $text-secondary: map-deep-get($palette, text, secondary);
    $bg: map-deep-get($palette, bg, main);

    $primary-palette: map-get($palette, primary);
    $primary: map-get($primary-palette, main);

    $secondary-palette: map-get($palette, secondary);
    $secondary: map-get($secondary-palette, main);

    $border: rgba($text-primary, 20%);
    $hover: $bg;
    $focus-border: mix($bg, $primary, 10%);

    $editor_bg: $bg;

    $error-palette: map-get($palette, error);
    $error: map-get($error-palette, main);

    .bd-form-row {
        & > label {
            color: $text-secondary;
        }
    }

    .bd-error {
        color: $error;
    }

    .bd-border-error {
        border-color: $error !important;
    }

    //---
    .form-control,
    .form-select {
        @if $light-theme {
        } @else {
            $editor_bg: mix($text-primary, $bg, 15%);
            $editor_bg: rgba($text-primary, 3%);
        }

        background-color: $editor_bg;
        color: $text-primary;
        border-color: $border;

        &:focus {
            border-color: $focus-border;
            box-shadow: 0 0 0 0.25rem rgba($primary, 0.2);
            box-shadow: none;
        }
    }

    .form-readonly {
        background-color: rgba(#000, 3%);
    }

    .form-select {
        $text_color: "rgb(" + red($text-primary) + "," + green($text-primary) + "," + blue($text-primary) + ")";
        $caret: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e";
        $caret: str-replace($caret, "currentColor", $text_color);
        background-image: url($caret);

        option,
        optgroup {
            background-color: $bg;
        }
    }

    .form-shaded {
        .form-control,
        .form-select {
            background-color: rgba($text-primary, 0.04);
        }
    }

    .form-floating {
        .form-control,
        .form-select {
            &:focus ~ svg,
            &:focus ~ label {
                color: $primary;
                opacity: 1;
            }
        }

        &.bd-compact > .form-control:focus,
        &.bd-compact > .form-control:not(:placeholder-shown),
        &.bd-compact > .form-select {
            ~ label {
                background-color: $editor_bg;
                color: mix($bg, $text-primary, 30%);
            }
        }

        &.bd-compact > .form-control:-webkit-autofill {
            ~ label {
                background-color: $editor_bg;
                color: mix($bg, $text-primary, 40%);
            }
        }

        &.bd-compact > .form-control:focus {
            ~ label {
                color: $primary;
            }
        }
    }
}

.theme-bd.theme-light {
    $palette: map-get($theme, light);
    @include form-theme($palette, true);
}

.theme-bd.theme-dark {
    $palette: map-get($theme, dark);
    @include form-theme($palette, false);
}