@import '../../styles/variables';

.TrendPill {
    display: flex;
    align-items: center;
    color: $bdl-gray-80;
    font-weight: bold;
    background-color: $bdl-gray-05;
}

.TrendPill-trend {
    position: relative;
    margin-left: $bdl-grid-unit;
    border: 5px solid transparent;
}

.TrendPill--up {
    .TrendPill-trend {
        bottom: 2px;
        border-bottom-color: $bdl-green-light;
    }
}

.TrendPill--down {
    .TrendPill-trend {
        top: 3px;
        border-top-color: $bdl-watermelon-red;
    }
}

.TrendPill-percentage {
    margin-right: $bdl-grid-unit;
}