@use 'sass:map';
@use 'mixins/label';
@use 'variables';

.dg-label {
    display: inline-flex;
    align-items: center;
    color: variables.$dg-white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: variables.$dg-font-size-base;
    margin-bottom: 0px;
    font-size: variables.$dg-font-size-sm;
    line-height: 1;
}

variables.$dg-theme-colors: map.merge(
    (
        'default': variables.$dg-gray-200,
        'light': variables.$dg-gray-700,
    ),
    variables.$dg-theme-colors
);

@each $name, $color in variables.$dg-theme-colors {
    .dg-label-#{$name} {
        background-color: $color;
    }
}

@each $name, $color in variables.$dg-theme-colors {
    .dg-label-outline-#{$name} {
        @include label.label-outline($color);
    }
}

.dg-label-default,
.dg-label-light,
.dg-label-outline-default,
.dg-label-outline-light {
    color: variables.$dg-gray-700;
}

.dg-label-sm {
    padding: 2px 8px;
    font-size: variables.$dg-font-size-sm;
}