public/components/punters/_punters.scss

.punters__container {
    position: relative;
    .drawer__section-title {
        display: inline-block;
    }
}

.punters__autocomplete-field {
    height: auto;
    padding: 5px 12px;

    &--focus { // stolen from bootstrap to emulate focused input field....
        border-color: rgba(82,168,236,.8);
        outline: 0;
        outline: thin dotted \9;
        -moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
        box-shadow: 0 0 8px rgba(82,168,236,.6) !important;
    }
}

.punters__button {
    margin-top: -4px;
}

.punters__button--inline {
    display: inline-block;
    margin-left: 4px;
}

// TOKEN LIST ================================================== //

.punters__token-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
}

.punters__input-token {
    flex: 1 0 40px;
}

.punters__text-input {
    display: inline-block;
    border: none;
    outline: none;
    width: 100%;
}

.punters__token {
    display: inline-block;
    margin: 1px;
    @include border-radius(4px);
    height: 20px;
    line-height: 16px;
    padding: 0 4px;
    background-color: $c-grey-200;
    cursor: pointer;
    color: $c-grey-700;

    flex: 0 0 auto;

    &:hover {
        background-color: $c-grey-400;
    }
}

.punters__token-remove {
    @extend %fs-data-1;
}

// AUTOCOMPLETE BOX ================================================== //

.punters__autocomplete-list {
    background-color: $c-grey-100;
    border: 1px solid $c-grey-500;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 999;
    @include box-shadow(2px 1px 5px $c-grey-500);

    position: absolute;
    min-width: 230px;
    width: 100%;
    max-height: 422px; // 10 items
    overflow-x: auto;
}

.punters__autocomplete-item {
    width: 100%;
    border-bottom: 1px solid $c-grey-500;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    font-size: 0;
    padding: 2px;
    line-height: 21px;
    &:last-child {
        border: none;
    }
    &:hover, &.punters__autocomplete-item--selected {
        background-color: $c-composer-blue;
        color: #ffffff;
        .punters__autocomplete-item-email {
            color: #ffffff;
        }
    }
}

.punters__autocomplete-item-email {
    display: inline-block;
    @extend %fs-data-3;
    padding: 3px;
}