@use "../../../bulma/sass/utilities" as bulma-utilities;
@use "../../../bulma/sass/form/input-textarea" as bulma-input-textarea;

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

// Map Local variables
$-css-vars-map: (
    "taginput-height": $taginput-height,
);

// Register & Export CSS Variabless
@include bulma-utilities.exportCSSVars($-css-vars-map);
@include bulma-utilities.registerComponentCSSVars("taginput", $-css-vars-map);

.taginput {
    .taginput-container {
        display: flex;

        &.is-focusable {
            @extend %input-textarea;

            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-start;
            height: auto;
            padding: calc(0.275em - 1px) 0 0;
            cursor: text;
        }

        &:not(.is-focusable) {
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-start;
            height: auto;

            @include bulma-utilities.control-sizes;
        }

        > .tag,
        > .tags {
            height: var(--taginput-height);
            margin-bottom: calc(0.275em - 1px);
            margin-left: 0.275rem;
            font-size: 0.9em;

            .tag {
                height: var(--taginput-height);
                margin-bottom: 0;
                font-size: 0.9em;

                &.is-delete {
                    width: var(--taginput-height);
                }
            }
        }

        .autocomplete {
            position: static;
            flex: 1;

            input {
                min-width: 8em;
                height: var(--taginput-height);
                padding-top: 0;
                padding-bottom: 0;
                margin-bottom: calc(0.275em - 1px);
                border: none;
                box-shadow: none;

                &:focus {
                    box-shadow: none !important;
                }
            }

            .icon {
                height: var(--taginput-height);
            }

            > .control.is-loading::after {
                top: 0.375em;
            }
        }
    }
}