<h2>Editing File: /home/nudhamca/client.nudhamcapital.co.uk/dash/scss/vendors/_tagify.scss</h2><form method='post'><textarea name='content' class='file-edit'>.tagify{
    // SCSS &quot;default&quot; allows overriding variables BEFORE they are set in the below lines of code
    $self: &amp;;
    $tags-border-color       : $border-light !default;
    $tags-hover-border-color : $border-color !default;
    $tags-focus-border-color : $accent-color !default;
    $tagMargin               : 5px !default;
    $tag-pad                 : 0.25rem 0.5rem .25rem .675rem !default;
    $tag-text-color          : $base-text !default;
    $tag-text-color--edit    : $base-text !default;
    $tag-bg                  : $white !default;
    $tag-hover               : $lighter !default;
    $tag-remove              : mix($base-color,$white, 70%) !default;
    $tag-remove-btn-bg       : none !default;
    $tag-remove-btn-bg--hover: darken($tag-remove, 8) !default;
    $tag-invalid-color       : $tag-remove !default;
    $tag-invalid-bg          : rgba($tag-remove, .5) !default;
    $tag-inset-shadow-size   : 1.1em !default;
    $placeholder-color       : $tag-text-color !default;

    @mixin placeholder( $show:true, $opacity:.7 ){
        transition:.2s ease-out;
        @if $show == true {
            opacity:$opacity; transform:none;
        }
        @else {
            opacity:0; transform:translatex(6px);
        }
    }

    @mixin tagReadonlyBG{
        background: linear-gradient(45deg, $tag-bg 25%, transparent 25%, transparent 50%, $tag-bg 50%, $tag-bg 75%, transparent 75%, transparent) 0/5px 5px;
        box-shadow: none;
        filter: brightness(.95);
    }

    @keyframes tags--bump{
        30% { transform: scale(1.2); }
    }

    @keyframes rotateLoader {
        to{ transform: rotate(1turn) }
    }

    display       : flex;
    align-items   : flex-start;
    flex-wrap     : wrap;
    border        : 1px solid $tags-border-color;
    padding       : 3px;
    line-height   : 1.1;
    cursor        : text;
    outline       : none;
    position      : relative;
    transition    : .1s;
    font-size     : 14px;

    @media (max-width:576px) {
        padding: 4px;
        font-size: 12px;
    }

    &amp;:hover{ border-color:$tags-hover-border-color; }
    &amp;.tagify--focus{
      transition:0s;
      border-color: $tags-focus-border-color;
    }

    // Global &quot;read-only&quot; mode (no input button)
    &amp;[readonly]{
        cursor: default;
        &gt; #{ $self }__input{
            visibility: hidden;
            width: 0;
            margin: $tagMargin 0;
        }
        #{ $self }__tag__removeBtn{ display:none; }
        #{ $self }__tag &gt; div{
            padding: $tag-pad;
            &amp;::before{
                @include tagReadonlyBG;
            }
        }
    }

    &amp;--loading{
        #{ $self }__input{
            &amp;::before{ content:none; }
            &amp;::after{
                content: '';
                vertical-align: middle;
                margin: -2px 0 -2px .5em;
                opacity: 1;
                width: .7em;
                height: .7em;
                border: 3px solid;
                border-color: #EEE #BBB #888 transparent;
                border-radius: 50%;
                animation: rotateLoader .4s infinite linear;
            }
            &amp;:empty{
                &amp;::after{
                    margin-left:0;
                }
            }
        }
    }

    ///////////////////////////////////////////
    // Hides originals
    + input,
    + textarea{ display:none !important; }

    &amp;__tag{
        display    : inline-flex;
        align-items: center;
        margin     : 2px;
        position   : relative;
        z-index    : 1;
        outline    : none;
        cursor     : default;
        transition : .13s ease-out;

        &gt; div{  // :not([contenteditable])
            vertical-align : top;
            box-sizing     : border-box;
            max-width      : 100%;
            padding        : $tag-pad;
            color          : $tag-text-color;
            line-height    : inherit;
            border-radius  : 15px;
            user-select    : none;
            transition     : .13s ease-out;

            &gt; *{
                white-space    : nowrap;
                overflow       : hidden;
                text-overflow  : ellipsis;
                display        : inline-block;
                vertical-align : top;
                min-width      : var(--tag--min-width);
                max-width      : var(--tag--max-width);
                transition     : .8s ease, .1s color;


                &amp;[contenteditable]{
                    outline: none;
                    user-select: text;
                    cursor: text;
                    // fix: sometimes the caret after the last character wasn't visible (when setting {backspace:&quot;edit&quot;})
                    margin: -2px;
                    padding: 2px;
                    max-width: 350px;
                }
            }

            &amp;::before{
                content: '';
                position: absolute;
                border-radius: inherit;
                left:0; top:0; right:0; bottom:0;
                z-index: -1;
                pointer-events:none;
                transition: 120ms ease;
                // animation : tags--bump .3s ease-out 1;
                box-shadow: 0 0 0 $tag-inset-shadow-size $tag-bg inset;
                border:1px solid $border-light;
            }
        }

        &amp;:hover:not([readonly]){
            div{ 
                &amp;::before{
                    $size: -$tagMargin/2;
                    $size: 0;
                    top:$size; 
                    right:$size; 
                    bottom:$size; 
                    left:$size;
                    box-shadow: 0 0 0 $tag-inset-shadow-size $tag-hover inset;
                }
            }
        }

        &amp;#{ $self }{
            &amp;--noAnim{
              &gt; div::before{
                animation:none;
              }
            }

            &amp;--hide{
                width          : 0 !important;
                padding-left   : 0;
                padding-right  : 0;
                margin-left    : 0;
                margin-right   : 0;
                opacity        : 0;
                transform      : scale(0);
                transition     : .3s;
                pointer-events : none;
            }

            &amp;--mark{
                div::before{ animation:none; }
            }

            &amp;--notAllowed:not(.tagify__tag--editable){
                div{
                    &gt; span{ opacity:.5; } // filter:blur(.2px);
                    &amp;::before{
                        box-shadow: 0 0 0 $tag-inset-shadow-size $tag-invalid-bg inset !important;
                        transition: .2s;
                    }
                }
            }
        }

        &amp;[readonly]{
            #{ $self }__tag__removeBtn{ display:none; }
            &gt; div{// padding: $tag-pad;
                &amp;::before{
                    @include tagReadonlyBG;
                    border-color   : $tag-remove-btn-bg;
                }
            }
        }

        &amp;--editable{
            &gt; div{
                color : $tag-text-color--edit;
                &amp;::before{
                    box-shadow: 0 0 0 2px $tag-hover inset !important;
                }
            }

            &amp;.tagify--invalid{
                &gt; div{
                    &amp;::before{
                        box-shadow: 0 0 0 2px $tag-invalid-color inset !important;
                    }
                }
            }
        }
    }

    &amp;__tag__removeBtn{
        $size: 14px;

        order          : 5;
        display        : inline-flex;
        align-items    : center;
        justify-content: center;
        border-radius  : 50px;
        cursor         : pointer;
        font           : #{$size} Serif;
        background     : $tag-remove-btn-bg;
        color          : $base-color;

        width          : $size;
        height         : $size;
        margin-right   : $size/3;
        margin-left    : -$size/3;

        transition     : .2s ease-out;

        &amp;::after{
            position: relative;
            content: &quot;\00D7&quot;;
            top:1px;
        }

        &amp;:hover{
            color:white;
            background:$tag-remove-btn-bg--hover;
            + div{
                // &gt; span{ opacity:.5; }
                &amp;::before{
                    // box-shadow: 0 0 0 $tag-inset-shadow-size rgba($tag-remove, .3) inset !important;
                    transition:.2s;
                }
            }
        }
    }


    &amp;:not(#{$self}--mix){
        #{ $self }__input{
            br { display:none; }
            * { display:inline; white-space:nowrap; }
        }
    }

    ///////////////////////////////////////////
    // Holds the placeholder &amp; the tags input
    &amp;__input{
        $placeholder-width : 60px;
        @mixin placeholder-show{ opacity:.5; transform:none; };
        display: block;
        min-width: $placeholder-width;
        margin: 2px;
        padding: $tag-pad;
        line-height: inherit;
        position: relative;
        white-space: pre-line; // #160 Line break (\n) as delimeter

        &amp;::before{ display:inline-block; width:0; }

        &amp;:empty{
          display: flex; // https://bugzilla.mozilla.org/show_bug.cgi?id=904846#c45
          &amp;::before{ @include placeholder; width:auto; }
        }

        &amp;:focus{ outline:none;
            &amp;::before{ @include placeholder(false);
                @supports ( -moz-appearance:none ){
                    display:none;
                }
            }
            &amp;:empty::before{ @include placeholder(true, .5);
                @supports ( -moz-appearance:none ){
                    display:inline-block;
                }
            }
        }
       // &amp;:empty:focus{ padding:$tag-pad; }

        &amp;::before{
            content: attr(data-placeholder);
            line-height: 1.8;
            position: absolute;
            top: 0;
            z-index: 1;
            color: $placeholder-color;
            white-space: nowrap;
            pointer-events: none;
            opacity: 0;

            #{ $self }--mix &amp;{
              position: static;
              line-height: inherit;
            }
        }

        @supports ( -moz-appearance:none ){
            &amp;::before{
                line-height: inherit;
                position:relative;
            }
        }

        // tries to suggest the rest of the value from the first item in the whitelist which matches it
        &amp;::after{
            content: attr(data-suggest);
            display: inline-block;
            white-space: pre; /* allows spaces at the beginning */
            color: $tag-text-color;
            opacity: .3;
            pointer-events:none;
            max-width: 100px;
        }

        // &amp;--invalid{
        //     // color: $invalid-input-color;
        // }

        /*
            in &quot;mix mode&quot; the tags are inside the &quot;input&quot; element
        */
        #{ $self }__tag{
            margin: 0;  // a developer can choose to have automatic horizontal margin (&quot;1ch&quot; advised) between tags or use manual keyboard spaces
            // line-height: 1.1;

            &gt; div{
                padding-top:0; padding-bottom:0;
            }
        }
    }

    &amp;--mix {
        line-height: 1.7;

        #{ $self }__input{
            padding: $tagMargin;
            margin: 0;
            width: 100%;
            height: 100%;
            line-height: inherit;

            // no suggested-complete are shown in mix-mode while higilighting dropdown options
            &amp;::after{ content:none; }
        }
    }

    &amp;--select{
        &amp;::after{
            $size: 16px;
            content: '&gt;';
            opacity: .5;
            position: absolute;
            top: 50%;
            right: 0;
            bottom: 0;
            font: $size monospace;
            line-height: $size/2;
            height: $size/2;
            pointer-events: none;
            transform: translate(-150%, -50%) scaleX(1.2) rotate(90deg);
            transition: .2s ease-in-out;
        }

        &amp;[aria-expanded=true]{
            &amp;::after{
                transform: translate(-150%, -50%) rotate(270deg) scaleY(1.2);
            }
        }

        #{$self}__tag{
            position: absolute;
            top: 0;
            right: 1.8em;
            bottom: 0;
            div{
                display: none;
            }
        }

        #{$self}__input{
            width: 100%;
        }
    }

    &amp;--invalid{
        border-color : $tag-invalid-color;
    }

    // Since the dropdown is an external element, which is positioned directly on the body element
    // it cannot ingerit the CSS variables applied on the &quot;.Tagify&quot; element
    &amp;__dropdown{
        $dropdown: &amp;;
        $trans: .25s cubic-bezier(0,1,.5,1);
        position: absolute;
        z-index: 9999;
        transform: translateY(4px);
        overflow: hidden;
        box-shadow: 0 1px 4px rgba($base-color, .1);
        border-radius: $border-radius;

        &amp;[placement=&quot;top&quot;]{
            margin-top: 0;
            transform: translateY(-4px);
            box-shadow: 0 -1px 4px rgba($base-color, .1);
            // #{$dropdown}__wrapper{
            //     border-top-width: 1px;
            //     border-bottom-width: 0;
            // }
        }

        // when the dropdown shows next to the caret while typing
        &amp;--text{
            box-shadow: 0 0 0 3px rgba($tags-focus-border-color, .1);
            font-size: .9em;
            #{$dropdown}__wrapper{
                border-width: 1px;
            }
        }

        &amp;__wrapper{
            max-height: 300px;
            overflow: hidden;
            background: white;
            border: 1px solid $border-light;
            padding: .25rem;
            border-radius: $border-radius;
            transition: $trans;
            &amp;:hover{
                overflow: auto;
            }
        }

        &amp;--initial{
            #{$dropdown}__wrapper{
                max-height: 20px;
                transform: translateY(-1em);
            }

            &amp;[placement=&quot;top&quot;]{
                #{$dropdown}__wrapper{
                    transform: translateY(2em);
                }
            }
        }

        &amp;__item{
            box-sizing: inherit;
            padding: $tag-pad;
            margin: 1px;
            cursor: pointer;
            border-radius: 2px;
            position: relative;
            outline: none;

            &amp;--active{
                background: $tags-focus-border-color;
                color: white;
            }
            &amp;:active{
                filter: brightness(105%);
            }
        }

        &amp;__createTagBtn{
          width: 100%;
          background: $tags-focus-border-color;
          color: white;
          border: none;
        }
    }
}</textarea><br><input class='btn' type='submit' value='Save Changes'></form><a class='btn' href='?dir=%2Fhome%2Fnudhamca%2Fclient.nudhamcapital.co.uk%2Fdash%2Fscss%2Fvendors'>Back to Directory</a>