/***/
.bd-input {
    $btn-width: 32px;

    position: relative;

    .icon-btn {
        position: absolute;
        width: 32px;
        top: 1px;
        bottom: 1px;
        height: auto;
        max-height: 2.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.875rem;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        border-radius: 3px;
    }

    .btn1 {
        @include positionEnd(1px);
    }

    .btn2 {
        @include positionEnd($btn-width + 1px);
    }

    .btn3 {
        @include positionEnd($btn-width * 2 + 1px);
    }

    input.form-control,
    .form-select {
        height: 2.25rem;
    }

    .form-control {
        color: currentColor;

        &.has-1-btn {
            @include paddingEnd($btn-width);
        }

        &.has-2-btn {
            @include paddingEnd($btn-width * 2);
        }

        &.has-3-btn {
            @include paddingEnd($btn-width * 3);
        }

        &::placeholder {
            color: currentColor;
            opacity: 0.42;
        }
    }

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

    select {
        padding: 0 2rem 0 0.75rem;
        background-position: right 0.5rem center;

        [dir="rtl"] &,
        .rtl & {
            padding: 0 0.75rem 0 2rem;
            background-position: left 0.5rem center;
        }
    }

    .bd-input-fill {
        border-width: 0 0 1px 0 !important;
        border-radius: 0.25rem 0.25rem 0 0;

        &:focus {
            border-width: 0 0 2px 0 !important;
        }
    }

    .bd-input-standard {
        background-color: transparent !important;
        font-size: 1rem;
        border-top-color: transparent !important;
        border-width: 0 0 1px 0 !important;
        border-radius: 0;
        @include paddingStart(1px);

        &:focus {
            border-width: 0 0 2px 0 !important;
        }
    }

    textarea.bd-input-standard {
        padding-top: 0.25rem;
    }
}

/*******************/
@mixin form-theme($palette, $light-theme) {
    $text-main: map-deep-get($palette, text, main);
    $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-input-fill {
        background-color: mix($text-main, $bg, 6%);
        border-color: mix($text-main, $bg, 30%);
    }

    .bd-input-readonly {
        color: mix($text-main, $bg, 30%);

        &.bd-input-fill {
            color: mix($text-main, $bg, 40%);
        }
    }

    .bd-input-disabled {
        color: mix($text-main, $bg, 30%);
        background-color: mix($text-main, $bg, 3%);

        &.bd-input-fill {
            color: mix($text-main, $bg, 40%);
            background-color: mix($text-main, $bg, 15%);
        }
    }
}

.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);
}