@use "sass:math";
@use '../variables.scss' as var;
@use '../utils/mediaQueries.scss' as media;

@mixin StandardFormItem {
    margin-bottom: 16px;
}

@mixin FormControl {
    border: 1px solid var(--control-border);
    background: var(--control-background);
    box-shadow: none;
    padding: 6px 11px;
    font-size: 14px;
    color: var(--text-color);
    border-radius: 4px;
    line-height: 1.5em;
    display: inline-block;
    height: var.$controlHeight;
    width: 100%;

    //box-sizing: border-box;
    &:hover {
        border-color: color-mix(in srgb, var(--sn-color-1) 90%, white);
    }

    &:active,
    &:focus {
        border-color: color-mix(in srgb, var(--sn-color-1) 90%, white);
        outline: 0;
        // box-shadow: 0 0 0 2px rgba(0,0,0, 0.2);
        border-right-width: 1px !important;
    }

    &:focus {
        box-shadow: color-mix(in srgb, var(--sn-color-1) 90%, white) 0px 0px 0px 1px;
    }

    &::placeholder {
        color: var(--control-placeholder-color);
    }

    &.disabled,
    &:disabled {
        border-color: var(--control-disabled-inner);
        cursor: not-allowed;
    }
}

@mixin SnForm {
    .#{var.$classPrefix}Form {
        &.horizontal {

            // maxWidth: 600px;
            @include media.from(m) {
                .#{var.$classPrefix}Form-item {
                    display: flex;
                    align-items: center;

                    .#{var.$classPrefix}Form-left,
                    .#{var.$classPrefix}Form-label {
                        width: 40%;
                        text-align: right;
                        padding: 0;

                        &::after {
                            content: ":";
                            position: relative;
                            top: -0.5px;
                            margin: 0 8px 0 2px;
                        }
                    }

                    .#{var.$classPrefix}Form-right,
                    .#{var.$classPrefix}Form-input {
                        width: 60%;
                    }
                }
            }
        }

        &-item {
            @include StandardFormItem;

            &.required .#{var.$classPrefix}Form-label::after {
                display: inline-block;
                margin-left: 4px;
                color: var(--sn-red);
                font-size: 14px;
                // font-family: SimSun, sans-serif;
                line-height: 1;
                content: "*";
            }

            .SnForm-help {
                color: var(--text-color-alt);
                font-size: 13px;
                margin-top: 4px;
            }

            &.has-danger {
                .SnForm-control {
                    border-color: color-mix(in srgb, var(--sn-red) 90%, white);

                    &:focus {
                        box-shadow: color-mix(in srgb, var(--sn-red) 90%, white) 0px 0px 0px 1px;
                    }
                }

                .SnForm-help {
                    color: var(--sn-red);
                }
            }

            &.has-success {
                .SnForm-control {
                    border-color: color-mix(in srgb, var(--sn-green) 90%, white);

                    &:focus {
                        box-shadow: color-mix(in srgb, var(--sn-green) 90%, white) 0px 0px 0px 1px;
                    }
                }

                .SnForm-help {
                    color: var(--sn-green);
                }
            }

            &.inner {
                position: relative;
                $innerPaddingTop: 14px;

                .SnForm {
                    &-label {
                        position: absolute;
                        z-index: 1;
                        top: 3px;
                        left: 11px;
                        font-size: 0.7rem;
                        pointer-events: none;
                    }

                    &-control {
                        height: calc(#{var.$controlHeight} + #{$innerPaddingTop});
                        padding-top: $innerPaddingTop;
                        padding-bottom: 0;

                        &.sm {
                            height: calc(#{var.$controlHeightSm} + 2px + #{$innerPaddingTop});
                        }

                        &.lg {
                            height: calc(#{var.$controlHeightLg} + 2px + #{$innerPaddingTop});
                        }
                    }
                }

                .SnControl {
                    &-prefix {
                        margin-top: math.div($innerPaddingTop, 3);
                    }

                    &-suffix {
                        margin-top: math.div($innerPaddingTop, 3);
                    }
                }

                .SnBtn {
                    height: 100%;

                    &.icon {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
            }

            &.outlined {
                position: relative;

                .SnForm {
                    &-label {
                        // Clear parent styles
                        padding: 0 8px;
                        margin-left: 8px;

                        // Position
                        position: absolute;
                        z-index: 1;
                        top: math.div(var.$controlHeight, 2);
                        transform: translateY(-50%);

                        // Colors and styles
                        transition: 0.1s top ease-out;
                        pointer-events: none;
                        color: var(--control-placeholder-color);

                        &.sm {
                            top: math.div(var.$controlHeightSm, 2);
                        }

                        &.lg {
                            top: math.div(var.$controlHeightLg, 2);
                        }
                    }

                    &-control {
                        &:focus+.SnForm-label {
                            color: var(--sn-color-1);
                        }

                        &:focus+.SnForm-label,
                        &:not(:placeholder-shown)+.SnForm-label {
                            top: 0;
                            transform: translateY(-50%) scale(0.9);
                            background: linear-gradient(transparent 50%, var(--control-background) 50%);
                            font-size: 0.9rem;
                        }
                    }
                }
            }
        }

        &-label {
            display: block;
            margin: 0;
            padding: 0 0 8px;
            line-height: 1.5;
            color: var(--text-color);
        }

        &-control {
            @include FormControl;

            &.sm {
                height: var.$controlHeightSm;
            }

            &.lg {
                height: var.$controlHeightLg;
            }
        }
    }

    textarea.#{var.$classPrefix}Form-control {
        font-family: inherit;
        font-size: inherit;
        height: auto;
    }

    select.#{var.$classPrefix}Form-control{
        padding: 0px 4px;
    }
}