/* ======================================================
    <!-- Tag Input -->
/* ====================================================== */

.tag-input__wrapper {

    --tag-input-control-border-radius: 0.375rem;
    --tag-input-control-wrapper-bg: #fff;
    --tag-input-control-wrapper-border-color: #dee2e6;
    --tag-input-control-color: #adb5bd;
    --tag-input-list-bg: #efefef;
    --tag-input-removebtn-fill: #000;
    --tag-input-removebtn-hover-fill: #f00;
    --tag-input-focus-border-color:#86b7fe;
    --tag-input-focus-box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);


    display: flex;


    ul,
    li {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    
    .tag-input__control-wrapper {
        display: flex;

        > div {
            position: relative;
            align-items: center;
            display: flex;
            flex-wrap: wrap;

            /* bootstrap style that match ".form-control" */
            padding: 0.375rem;
            background-color: var(--tag-input-control-wrapper-bg);
            background-clip: padding-box;
            border: 1px solid var(--tag-input-control-wrapper-border-color);
            appearance: none;
            border-radius: var(--tag-input-control-border-radius);
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            padding-bottom: 1px;


            .tag-input__control {
                margin-bottom: 0.375rem;
                
                input {
                    background: transparent;
                    border: none;
                    outline: none;
                    padding: 0;
                    margin: 0;
                    margin-left: .5rem;

                    /* bootstrap style that match ".form-control" */
                    font-size: 0.875rem;
                    font-weight: 400;
                    line-height: 1.5;
                    color: var(--tag-input-control-color);

                    &:focus {
                        outline: none;
                        box-shadow: none;
                    }
                }

            }

        }

    }


    ul.tag-input__list {
        li {
            display: inline-block;
            margin: 5px;
            margin-bottom: 0;
            padding: .1rem 1.5rem .1rem 1rem;
            font-size: 0.875rem;
            background: var(--tag-input-list-bg);
            border-radius: 30px;
            overflow: hidden;
            text-overflow: ellipsis;
            position: relative;

            > a {
                font-weight: 400;
                opacity: .6;
                font-size: 18px;
                line-height: 20px;
                position: absolute;
                right: 8px;
                top: 50%;
                transform: translateY(-50%);

                path {
                    fill: var(--tag-input-removebtn-fill);
                }

                &:hover {
                    path {
                        fill: var(--tag-input-removebtn-hover-fill);
                    }
                }
            }

        }

    }

    &.focus {
        .tag-input__control-wrapper {
            > div {
                box-shadow: var(--tag-input-focus-box-shadow);
                border-color: var(--tag-input-focus-border-color);
            } 
        }
    }

}