@use "bulma/sass/utilities/css-variables" as cv;
@use "bulma/sass/utilities/initial-variables" as iv;
@use "bulma/sass/utilities/derived-variables" as dv;
@use "bulma/sass/utilities/controls" as controls;
@use "bulma/sass/utilities/mixins" as mixins;
@use "bulma/sass/form/input-textarea";
@use "../utils/shared";

$taginput-height: calc(2em - 1px) !default;


.#{iv.$class-prefix}taginput {
    @include cv.register-vars((
        "taginput-height": #{$taginput-height}
    ))
}

.#{iv.$class-prefix}taginput {
    .taginput-container {

        @extend %input-textarea;
        display: flex;
        box-shadow: cv.getVar('input-shadow');

        input {
            border: none;
            outline: none;
        }

        &.is-focusable {
            @extend %input;
            padding-bottom: 0;
            padding-top: calc(0.275em - 1px);
            padding-left: 0;
            padding-right: 0;
            align-items: center;
            flex-wrap: wrap;
            justify-content: flex-start;
            height: auto;
            cursor: text;
            &.is-focused {
                // border-color: cv.getVar("taginput-active-border-color");
                // box-shadow: cv.getVar("input-focus-shadow-size") cv.getRgbaVar("taginput-border-color", cv.getVar("input-focus-shadow-alpha"));
            }
        }
        &:not(.is-focusable) {
            align-items: center;
            flex-wrap: wrap;
            justify-content: flex-start;
            height: auto;
            &.is-small {
                @include controls.control-small;
            }
            &.is-medium{
                @include controls.control-medium;
            }
            &.is-large {
                @include controls.control-large;
            }
        }

        > .tag,
        > .tags {
            margin-left: 0.275rem;
            margin-bottom: calc(0.275em - 1px);
            font-size: 0.9em;
            height: cv.getVar("taginput-height");
            .tag {
                margin-bottom: 0;
                font-size: 0.9em;
                height: cv.getVar("taginput-height");
                &.is-delete {
                    width: cv.getVar("taginput-height");
                }
            }
        }

        .autocomplete {
            position: static;
            flex: 1;
            input {
                height: cv.getVar("taginput-height");
                margin-bottom: calc(0.275em - 1px);
                padding-top: 0;
                padding-bottom: 0;
                border: none;
                box-shadow: none;
                min-width: 8em;
                &:focus {
                    box-shadow: none !important;
                }
            }
            .icon {
                height: cv.getVar("taginput-height");
            }
            > .control.is-loading::after {
                top: 0.375em;
            }
        }

        &[disabled],
        &[disabled] input {
            cursor: not-allowed;
            opacity: 0.5;
        }
    }
}