/**************************************
 * Round Pill
 **************************************/
@import '../../styles/variables';
@import './mixins';

.bdl-RoundPill {
    @include bdl-RoundPill();
}

.bdl-RoundPill-avatar,
.bdl-RoundPill-closeBtn {
    path {
        fill: $bdl-gray-50;
    }
}

.bdl-RoundPill-text {
    flex-grow: 1;
    flex-shrink: 1;
    margin: 0 $bdl-grid-unit * 2 !important;
    padding-top: 1px; // offset for aligning "average" string that doesn't have descender chars
    overflow: hidden;
    line-height: $bdl-fontSize + $bdl-grid-unit; // for vertical centering using flex;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bdl-RoundPill-closeBtn {
    position: unset;
    top: unset;
    flex-grow: 0;
    flex-shrink: 0;
    height: 12px;
    margin-right: $bdl-grid-unit * 2;
    cursor: pointer;
}

.bdl-RoundPill--warning {
    @include bdl-RoundPill($background-color: $bdl-yellorange-10, $border-color: $bdl-yellorange-50, $selected-background-color: $bdl-yellorange-20, $selected-border-color: $bdl-yellorange);
}

.bdl-RoundPill--error {
    @include bdl-RoundPill($background-color: $bdl-watermelon-red-10, $border-color: $bdl-watermelon-red-50, $selected-background-color: $bdl-watermelon-red-20, $selected-border-color: $bdl-watermelon-red);
}

.bdl-RoundPill--disabled {
    opacity: .5;

    .bdl-RoundPill-closeBtn {
        cursor: default;
    }
}