@import "bootstrap/scss/forms";

//
// Form
//

form {
    margin-block-end: 0;
}

.form-control {
    &:focus {
        &::placeholder {
            color: $input-focus-placeholder-color;
        }
    }
}
.form-control-muted {
    background-color: $input-muted-bg;
    border-color: $input-muted-bg;

    &:focus {
        background-color: $input-muted-focus-bg;
    }
}

.form-control-alt {
    background-color: $input-alt-bg;
    border-color: $input-alt-bg;
    box-shadow: $input-alt-box-shadow;

    &:focus {
        background-color: $input-alt-focus-bg;
        border-color: $input-alt-focus-border-color;
        box-shadow: $input-alt-focus-box-shadow;
    }
}


// Form control flush
// Removes borders and paddings from inputs and text areas

.form-control-flush {
    padding: 0;
    border-width: 0;
    background-color: transparent;
    box-shadow: none;

    &:focus {
        background-color: transparent;
        box-shadow: none;
        border-width: 0;
    }
}

// Additional form labels

.form-check-label {
    @include font-size($form-label-font-size);
    font-style: $form-label-font-style;
    font-weight: $form-label-font-weight;
    color: $form-label-color;
}

// Textarea

textarea[resize="none"] {
    resize: none!important;
}

textarea[resize="both"] {
    resize: both!important;
}

textarea[resize="vertical"] {
    resize: vertical!important;
}

textarea[resize="horizontal"] {
    resize: horizontal!important;
}

// Autosize textarea
.textarea-autosize {
    display: grid;

    &:after {
        content: attr(data-replicated-value) " ";
        white-space: pre-wrap;
        visibility: hidden;
    }

    > textarea {
        resize: none;
        overflow: hidden;
    }

    > textarea,
    &:after {
        border: 1px solid black;
        padding: 0.5rem;
        font: inherit;
        grid-area: 1 / 1 / 2 / 2;
    }
}

.form-group-stacked {
    .form-control,
    .form-select {
        position: relative;
        box-sizing: border-box;
        height: auto;

        &:focus {
            z-index: 2;
            // box-shadow: none;
        }
    }

    > :first-child {
        .form-control,
        .form-select {
            margin-bottom: -1px;
            @include border-bottom-radius(0);
        }
    }

    > :last-child {
        .form-control,
        .form-select {
            @include border-top-radius(0);
        }
    }

    > .row {
        margin: 0;

        > :first-child,
        > :last-child {
            padding: 0;
        }

        > :first-child {
            .form-control,
            .form-select {
                border-right: 0;
                @include border-end-radius(0);
            }
        }
        > :last-child {
            .form-control,
            .form-select {
                @include border-start-radius(0);
            }
        }
    }
}

// Dark forms

.form-dark {
    .form-control {
        color: rgba($white, .9);
        background-color: tint-color($dark, 10%);
        border: $input-border-width solid tint-color($dark, 10%);

        // Placeholder
        &::placeholder {
            color: transparentize(color-contrast($dark), .2);
        }

        &:focus {
            background-color: tint-color($dark, 5%);
            border: $input-border-width solid tint-color($dark, 5%);

            &::placeholder {
                color: transparentize(color-contrast($dark), .4);
            }
        }
    }

    .input-group {
        .input-group-text {
            background-color: tint-color($dark, 10%);
            border-color: tint-color($dark, 10%);
            color: rgba($white, .9);
        }

        &:focus-within {
            .input-group-text {
                background-color: tint-color($dark, 5%);
                border-color: tint-color($dark, 5%);
            }
        }
    }

}