$eve-chip-size: 2rem;

.eve-chip {
    align-items: center;
    background: $eve-color-bright-silver;
    border-radius: $eve-chip-size / 2;
    display: inline-flex;
    height: $eve-chip-size;
    line-height: $eve-chip-size;
    padding: 0 $eve-spacing-12;
    font-size: $eve-font-14;
    color: $eve-color-black;
    max-width: 100%;

    .eve-chip-color,
    .eve-chip-icon,
    .eve-avatar {
        margin-left: -$eve-spacing-8;
        margin-right: $eve-spacing-8;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .eve-chip-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        background: $eve-color-darker-silver;
        cursor: pointer;

        svg {
            width: 1.125rem;
            height: 1.125rem;
            fill: $eve-color-white;
        }

        &:hover {
            background-color: $eve-color-silver;
        }
    }

    .eve-avatar {
        font-size: $eve-font-12;
        line-height: 1.5rem;
        color: $eve-color-white;

        &[data-initials] {
            background: $eve-color-blue;
        }
    }

    i {
        background-color: $eve-color-darker-silver;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E"); // sass-lint:disable-line quotes
        background-position: center;
        background-repeat: no-repeat;
        background-size: $eve-chip-size / 2;
        border-radius: 50%;
        cursor: pointer;
        height: 1.125rem;
        margin: 0 (-$eve-spacing-4) 0 $eve-spacing-8;
        width: 1.125rem;
        flex-shrink: 0;

        &:hover {
            background-color: $eve-color-silver;
        }
    }

    &.is-active {
        background: $eve-color-blue;
        color: $eve-color-white;

        .eve-chip-icon {
            background: $eve-color-white;

            svg {
                fill: $eve-color-blue;
            }

            &:hover {
                background-color: $eve-color-bright-blue;
            }
        }

        .eve-avatar {
            &[data-initials] {
                background: $eve-color-white;
                color: $eve-color-blue;
            }
        }

        i {
            background-color: $eve-color-white;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232778d9'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E"); // sass-lint:disable-line quotes

            &:hover {
                background-color: $eve-color-bright-blue;
            }
        }
    }

    &.is-disabled {
        opacity: .5;
        pointer-events: none;
    }
}

.eve-chips {
    display: flex;
    flex-wrap: wrap;
    margin: -$eve-spacing-4;

    .eve-chip {
        margin: $eve-spacing-4;
        max-width: calc(100% - #{$eve-spacing-8});
    }

    .eve-button {
        border-radius: 50%;
        width: $eve-chip-size;
        height: $eve-chip-size;
        margin: $eve-spacing-4;
    }

    &.is-autocomplete {
        border: 1px solid $eve-color-dark-silver;
        margin: 0;
        padding: $eve-spacing-4;

        .eve-input {
            flex: 1;
            border: 0;
            padding: 0;
            height: 2rem;
            margin: $eve-spacing-4;
            min-width: 8rem;
        }
    }
}