@use '../function' as *;
@use '../mixin';
@use 'sass:color';

@mixin form-search() {
    .form-field-search {
        position: relative;
        padding: 0;

        .form-input {
            padding: rem(9) rem(12) rem(9) rem(34);
        }

        &.small .form-input {
            padding: rem(5) rem(7) rem(5) rem(22);
        }

        &.large .form-input {
            padding: rem(10) rem(12) rem(10) rem(34);
        }

        &.loading .form-input {
            padding-right: rem(34);
        }

        &.loading.small .form-input {
            padding-right: rem(22);
        }

        &.loading.large .form-input {
            padding-right: rem(34);
        }
    }

    .form-field-search-icon {
        position: absolute;
        left: rem(12);
        top: rem(10);
        z-index: 1;
        font-size: 120%;
        color: var(--r-color-light-darken-30);

        .form-field-search.small & {
            left: rem(7);
            top: rem(7);
        }

        .form-field-search.large & {
            font-size: 130%;
            top: rem(12);
        }
    }

    .form-field-search-loading-icon {
        @include mixin.loader(16);
        @extend .loader;
        position: absolute;
        top: 50%;
        right: rem(12);
        transform: translateY(-50%);
        z-index: 2;
        display: none;

        .form-field-search.loading & {
            display: block;
        }

        .form-field-search.small & {
            @include mixin.loader(12);
            right: rem(7);
        }
    }

    .form-field-search-hint {
        position: absolute;
        left: 0;
        top: rem(40);
        display: none;
        z-index: 5;
        font-size: rem(14);
        line-height: rem(18);
        background-color: var(--r-form-field-search-hint-background);
        border: rem(1) solid var(--r-form-field-search-border-color);
        border-radius: var(--r-form-input-radius);
        width: 100%;
        max-height: rem(300);
        overflow-y: auto;
        @include mixin.nice-scroll();

        .form-field-search.hint & {
            display: block;
        }

        ul {
            padding: 0;
        }

        li {
            &:last-child {
                border-bottom: none;
            }

            a {
                display: block;
                padding: rem(7) rem(12);
                color: var(--r-form-field-search-hint-color);
                @include mixin.transition('background, color');

                &:hover {
                    background-color: var(--r-form-field-search-item-hover-background);
                }

                .badge {
                    float: right;
                }
            }
        }

        .form-field-search.large & {
            top: rem(44);
        }

        .form-field-search.small & {
            top: rem(30);
            font-size: rem(12);
            line-height: rem(14);
        }
    }
}

@mixin roolith-form() {
    ::placeholder {
        color: var(--r-form-input-placeholder-color);
    }

    input,
    textarea,
    select {
        font-family: var(--r-global-base-font);
        font-size: rem(14);
        outline: none;

        .form-field.small & {
            font-size: rem(12);
        }

        .form-field.large & {
            font-size: rem(16);
        }
    }

    .form-field {
        position: relative;

        .form & {
            padding-bottom: rem(20);
        }
    }

    .form-label {
        font-size: rem(14);
        line-height: rem(18);
        padding-bottom: rem(8);
        display: block;

        .form-field.small & {
            font-size: rem(12);
            line-height: rem(16);
            padding-bottom: rem(5);
        }

        .form-field.large & {
            font-size: rem(16);
            line-height: rem(22);
        }

        &.right {
            @include mixin.breakpoint(large-up) {
                padding-top: rem(8);
                text-align: right;
            }
        }

        .error & {
            color: var(--r-form-error-color);
        }

        .success & {
            color: var(--r-form-success-color);
        }

        .warning & {
            color: var(--r-form-warning-color);
        }
    }

    .form-input {
        width: 100%;
        border: rem(1) solid var(--r-form-input-border-color);
        border-radius: var(--r-form-input-radius);
        padding: rem(10) rem(12);
        box-shadow: none;
        background-color: var(--r-form-input-background-color);
        color: var(--r-form-input-color);
        @include mixin.transition('border, background');

        &:hover {
            border-color: var(--r-form-input-hover-border-color);
        }

        &:focus {
            border-color: var(--r-form-input-focus-border-color);
        }

        .form-field.small & {
            padding: rem(5) rem(7);
        }

        .form-field.large & {
            padding: rem(11) rem(12);
        }

        .error & {
            border-color: var(--r-form-error-color);
        }

        .success & {
            border-color: var(--r-form-success-color);
        }

        .warning & {
            border-color: var(--r-form-warning-color);
        }
    }

    .form-primary .form-input {
        border: rem(1) solid var(--r-form-primary-border-color);
        background: var(--r-form-primary-color);
        box-shadow: none;

        &:hover {
            border-color: var(--r-form-primary-hover-color);
        }

        &:focus {
            border-color: var(--r-form-primary-focus-color);
            background: var(--r-form-primary-focus-color);
        }
    }

    .form-textarea {
        @extend .form-input;
        resize: vertical;
        height: rem(137);
    }

    .form-text {
        padding-top: rem(8);
        color: var(--r-form-text-color);
        font-size: rem(11);
        display: block;

        .form-field.small & {
            padding-top: rem(5);
        }

        .form-field.large & {
            font-size: rem(12);
            padding-top: rem(10);
        }

        .error & {
            color: var(--r-form-error-color);
        }

        .success & {
            color: var(--r-form-success-color);
        }

        .warning & {
            color: var(--r-form-warning-color);
        }
    }

    .form-checkbox-label {
        position: relative;
        font-size: rem(14);
        line-height: rem(22);
        padding-left: rem(25);
        display: block;
        color: var(--r-form-checkbox-label-color);

        &::selection {
            background: transparent;
        }

        .form-field.small & {
            font-size: rem(12);
            line-height: rem(16);
        }
    }

    .form-check-input {
        appearance: none;
        width: rem(15);
        height: rem(15);
        background-color: var(--r-color-white);
        border: rem(1) solid color-mix(in srgb, var(--r-form-input-border-color), black 15%);
        border-radius: var(--r-form-input-radius);
        position: absolute;
        left: 0;
        top: rem(4);
        margin: 0;
        @include mixin.transition('border');

        &:hover {
            border-color: var(--r-form-input-hover-border-color);
        }

        &:before {
            position: absolute;
            left: 0;
            top: 0;
            content: '';
            display: block;
        }

        &:checked {
            background-color: var(--r-color-primary);
            border-color: var(--r-color-primary);
        }

        &:checked:before {
            background-image: inline-svg(
                '<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke-width="2" color="#ffffff" width="14" height="14" viewBox="0 0 24 24"><path stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" d="m5 13 4 4L19 7"/></svg>'
            );
            background-repeat: no-repeat;
            background-position: center;
            width: rem(14);
            height: rem(14);
        }

        .form-field.small & {
            top: 0;
        }

        &.is-indeterminate {
            background-color: var(--r-color-light);
            border-color: var(--r-color-primary);

            &:after {
                content: '-';
                position: absolute;
                left: rem(3);
                top: rem(-5);
                color: var(--r-color-primary);
                font-size: rem(18);
            }
        }
    }

    .form-select {
        @extend .form-input;
        background-image: inline-svg(
            '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke-width="1.5" color="#222733" viewBox="0 0 24 24"><path stroke="#222733" stroke-linecap="round" stroke-linejoin="round" d="m17 8-5-5-5 5M17 16l-5 5-5-5"/></svg>'
        );
        background-position: calc(100% - rem(10)) center;
        background-repeat: no-repeat;
        appearance: none;
        padding: rem(9) rem(32) rem(9) rem(12);

        .theme-dark & {
            background-image: inline-svg(
                '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke-width="1.5" color="#9ca3af" viewBox="0 0 24 24"><path stroke="#9ca3af" stroke-linecap="round" stroke-linejoin="round" d="m17 8-5-5-5 5M17 16l-5 5-5-5"/></svg>'
            );
        }

        .form-field.small & {
            background-position: calc(100% - rem(6)) center;
            padding: rem(5) rem(16) rem(5) rem(7);
        }

        .form-field.large & {
            padding: rem(11) rem(32) rem(11) rem(12);
        }

        &[multiple] {
            background-image: none;
        }

        .theme-dark &:not([multiple]) option {
            background-color: var(--r-form-input-background-color);
            color: var(--r-form-input-color);
        }
    }

    .form-radio-items {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: rem(10);

        .vertical & {
            flex-direction: column;
            gap: rem(5);
        }
    }

    .form-radio-item {
        font-size: rem(14);
        line-height: 1.4;
        display: flex;
        align-items: center;
        gap: rem(5);
        cursor: pointer;

        .form-field.small & {
            font-size: rem(12);
        }

        .form-field.large & {
            font-size: rem(16);
        }

        &.is-multiline {
            align-items: flex-start;

            .form-radio {
                position: relative;
                top: rem(3);
            }
        }
    }

    .form-radio {
        margin: 0;
    }

    [readonly] {
        background: var(--r-form-disable-input-color);

        &:hover {
            border-color: var(--r-form-input-border-color);
        }

        &:focus {
            border-color: var(--r-form-input-border-color);
            box-shadow: none;
        }
    }

    .form-file {
        &::file-selector-button {
            @extend .button, .button-small;
        }
    }

    .form-field-password {
        position: relative;

        .form-input {
            padding-right: rem(40);
        }
    }

    .form-password-toggle {
        position: absolute;
        right: rem(12);
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        padding: 0;
        margin: 0;
        background: transparent;
        border: none;
        color: var(--r-form-input-color);
        font-size: rem(18);
        line-height: rem(18);
        width: rem(18);
        height: rem(18);
        margin-top: rem(2);

        .small & {
            right: rem(8);
            margin-top: 0;
        }

        .large & {
            margin-top: rem(4);
        }
    }

    @include form-search();
}