@import '../dynamic.scss';

.badge {
    font-size: $font-size-base;
    font-weight: 600;
    padding: 0.4em 0.6em;
    border-radius: $border-radius-sm;
    min-height: $input-height-sm;
    vertical-align: middle;

    &.badge-secondary {
        background-color: $gray-300;
    }
}
h1 > .badge {
    font-size: $h2-font-size;
    border-radius: $border-radius;
}
h2 > .badge {
    font-size: $h3-font-size;
    border-radius: $border-radius;
}
h3 > .badge {
    font-size: $h4-font-size;
    border-radius: $border-radius;
}

.badge-pill {
    padding-right: 0.8em;
    padding-left: 0.8em;
    border-radius: $input-height-sm / 2;
}

.badge-pill-round {
    font-size: $font-size-base;
    font-weight: 600;
    text-align: center;
    line-height: $input-height-sm;
    padding: 0;
    border-radius: $input-height-sm / 2;
    height: $input-height-sm;
    width: $input-height-sm;
    display: inline-block;
    overflow: hidden;
}