/*
 *
 *  IN LOCO
 *  www.inlocomedia.com
 *
 *  Copyright 2017 - All Rights Reserved.
 *
 *  -------- SUPERNOVA ---------
 *      chip component file
 *  ----------- *** ------------
 *
 */

 @import "chip_variables";

 .sn-chip {
    display: inline-block;
    padding: 0 16px;
    margin-bottom: 8px;
    height: 40px;
    font-size: 14px;
    line-height: 40px;
    border-radius: 24px;
    background-color: #f1f1f1;

    &__inner-wrapper {
        display: flex;

        &__text {
            display: inline-block;
            max-width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        &__tag {
            align-self: flex-end;
            font-size: 12px;
            color: #bdbdbd;
            margin: auto 0 auto 8px;
        }

        &__image {
            height: 40px;
            width: 40px;
            border-radius: 50%;

            &--left {
                float: left;
                margin: 0 12px 0 -16px;
            }

            &--right {
                float: right;
                margin: 0 -16px 0 12px;
            }

            &--clickable {
                cursor: pointer;
            }
        }

        &__secondary-image {
            width: 16px;
            height: 16px;
            margin: auto 4px auto -6px;
            border-radius: 50%;
        }

        &__icon {
            color: #999;
            font-weight: bold;
            font-size: 19px;
            line-height: 40px;

            &--left {
                float: left;
                padding-right: 12px;
            }

            &--right {
                float: right;
                padding-left: 12px;
            }

            &--clickable {
                cursor: pointer;
            }
        }
    }
 }