/* Copyright (C) 2016 NooBaa */

token-field {
    display: block;

    .token-field-wrapper {
        padding: @gutter/8 3/8*@gutter;
        width: 100%;
        height: 100%;
        overflow-y: auto;
    }

    &.invalid > .token-field-wrapper {
        &,
        &:focus,
        &.focus {
            border-color: rgb(var(--color31));
        }
    }

    .token {
        position: relative;
        border-radius: 1px;
        font-size: @font-size1;
        line-height: 13px;
        margin: @gutter/4;
        padding: @gutter/2;
        max-width: 100%;

        > .token-text {
            position: relative;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        > .token-remove-btn{
            margin-left: @gutter/2;
            z-index: 1;

            > svg-icon {
                width: 8px;
                height: 8px;
            }
        }

        &:before {
            .fill();
            content: '';
            background: rgb(var(--color07));
            animation: fade-in 250ms ease-out;
        }
    }

    input[type="text"] {
        border : none;
        padding: 0 @gutter/2;
        height: 36px;
        margin: @gutter/4 0;
    }
}
