@require "variables"

unless flat-build {
    @require "node_modules/boundless-typeahead/style"
}

// Skin-specific styles go here. Demo-specific styles go in demo/style.styl.

.b-tokenfield-wrapper {
    background: TokenizedInput-backgroundColor;
    border: 1px solid TokenizedInput-borderColor;
    border-radius: borderRadius;
    display: flex;
    font-size: Input-fontSize;

    .b-typeahead-wrapper {
        background: transparent;
        border: 0;
        flex-grow: 1;

        .b-input {
            color: TokenizedInput-color;

            // only applying overrides on top of the existing Input styles

            & + .b-input-placeholder {
                background: transparent;
                border-color: transparent;
                color: TokenizedInput-placeholder-color;
            }

            &[disabled] {
                color: TokenizedInput-color-disabled;
                opacity: TokenizedInput-opacity-disabled;

                & + .b-input-placeholder,
                &:active + .b-input-placeholder,
                &:focus + .b-input-placeholder,
                &:hover + .b-input-placeholder {
                    background: transparent;
                    border-color: transparent;
                }
            }

            &:active {
                color: TokenizedInput-color-active;

                & + .b-input-placeholder {
                    background: transparent;
                    border-color: transparent;
                }
            }

            &:focus {
                color: TokenizedInput-color-focus;

                & + .b-input-placeholder {
                    background: transparent;
                    border-color: transparent;
                }
            }

            &:hover {
                color: TokenizedInput-color-hover;

                & + .b-input-placeholder {
                    background: transparent;
                    border-color: transparent;
                }
            }
        }
    }
}

.b-tokenfield-wrapper .b-typeahead,
.b-tokenfield-wrapper .b-typeahead-hint {
    align-self: stretch;
    padding: TokenizedInput-token-margin * 2;
}

.b-tokenfield {
    display: flex;
}

.b-tokenfield-tokens {
    display: flex;
    flex-shrink: 0;
    margin: TokenizedInput-token-margin 0 TokenizedInput-token-margin TokenizedInput-token-margin;

    &:empty {
        margin: 0;
    }
}

.b-tokenfield-token {
    align-items: center;
    align-self: stretch;
    background: TokenizedInput-token-backgroundColor;
    border: 1px solid TokenizedInput-token-borderColor;
    border-radius: borderRadius;
    color: TokenizedInput-token-color;
    cursor: pointer;
    display: flex;
    line-height: 1;
    margin-right: TokenizedInput-token-margin;
    padding: TokenizedInput-token-margin (TokenizedInput-token-margin * 2);
    white-space: nowrap;
    transition: all 200ms ease-in-out;

    &:focus {
        background: TokenizedInput-token-backgroundColor-focus;
        border-color: TokenizedInput-token-borderColor-focus;
        color: TokenizedInput-token-color-focus;

        .b-tokenfield-token-close {
            color: TokenizedInput-tokenClose-color-focus;
        }
    }

    &:hover {
        background: TokenizedInput-token-backgroundColor-hover;
        border-color: TokenizedInput-token-borderColor-hover;
        color: TokenizedInput-token-color-hover;

        .b-tokenfield-token-close {
            color: TokenizedInput-tokenClose-color-hover;
        }
    }

    &:active {
        background: TokenizedInput-token-backgroundColor-active;
        border-color: TokenizedInput-token-borderColor-active;
        color: TokenizedInput-token-color-active;
    }

    &:last-child {
        margin-right: 0;
    }

    &.b-tokenfield-token-selected {
        background: TokenizedInput-tokenSelected-backgroundColor;
        border-color: TokenizedInput-tokenSelected-borderColor;
        color: TokenizedInput-tokenSelected-color;

        .b-tokenfield-token-close {
            color: TokenizedInput-tokenSelectedClose-color;
        }

        &:focus {
            background: TokenizedInput-tokenSelected-backgroundColor-focus;
            border-color: TokenizedInput-tokenSelected-borderColor-focus;
            color: TokenizedInput-tokenSelected-color-focus;

            .b-tokenfield-token-close {
                color: TokenizedInput-tokenSelectedClose-color-focus;
            }
        }

        &:hover {
            background: TokenizedInput-tokenSelected-backgroundColor-hover;
            border-color: TokenizedInput-tokenSelected-borderColor-hover;
            color: TokenizedInput-tokenSelected-color-hover;

            .b-tokenfield-token-close {
                color: TokenizedInput-tokenSelectedClose-color-hover;
            }
        }
    }
}

.b-tokenfield-token-close {
    color: TokenizedInput-tokenClose-color;
    cursor: pointer;
    display: inline-block;
    font-size: 0.85em;
    margin-left: 0.5rem;

    transition: all 200ms ease-in-out;
}