+/*\r
+ Label\r
+*/\r
+\r
+/// @Foundation.settings\r
+// Label\r
+$label-fontsize: 0.8rem !default;\r
+$label-padding: ($global-padding / 3) ($global-padding / 2) !default;\r
+$label-radius: 0 !default;\r
+$label-background: $primary-color !default;\r
+$label-color: isitlight($primary-color) !default;\r
+\r
+$badge-fontsize: 0.8em !default;\r
+$badge-diameter: 1.5rem !default;\r
+$badge-background: $primary-color !default;\r
+$badge-color: #fff !default;\r
+///\r
+\r
+%label {\r
+ line-height: 1;\r
+ white-space: nowrap;\r
+ display: inline-block;\r
+ cursor: default;\r
+}\r
+\r
+@mixin label-layout(\r
+ $fontsize: $label-fontsize,\r
+ $padding: $label-padding\r
+) {\r
+ font-size: $fontsize;\r
+ padding: $padding;\r
+}\r
+\r
+@mixin label-style(\r
+ $background: $label-background,\r
+ $color: $label-color,\r
+ $radius: $label-radius\r
+) {\r
+ background: $background;\r
+ border-radius: $radius;\r
+\r
+ @if $color == auto {\r
+ color: isitlight($background);\r
+ }\r
+ @else {\r
+ color: $color;\r
+ }\r
+}\r
+\r
+@mixin label(\r
+ $background: $label-background,\r
+ $color: $label-color,\r
+ $radius: $label-radius,\r
+ $fontsize: $label-fontsize,\r
+ $padding: $label-padding\r
+) {\r
+ @extend %label;\r
+ @include label-layout($fontsize, $padding);\r
+ @include label-style($background, $color, $radius);\r
+}\r
+\r
+@include exports(label) {\r
+ .label {\r
+ @include label;\r
+\r
+ @each $color in map-keys($foundation-colors) {\r
+ &.#{$color} {\r
+ $color-value: map-get($foundation-colors, $color);\r
+ @include label-style($color-value, auto);\r
+ }\r
+ }\r
+ }\r
+}\r
+\r
+/*\r
+ Badge\r
+*/\r
+\r
+%badge {\r
+ align-items: center;\r
+ justify-content: center;\r
+ display: inline-flex;\r
+ border-radius: 1000px;\r
+}\r
+\r
+@mixin badge-layout(\r
+ $fontsize: $badge-fontsize,\r
+ $diameter: $badge-diameter\r
+) {\r
+ font-size: $fontsize;\r
+ width: $diameter;\r
+ height: $diameter;\r
+}\r
+\r
+@mixin badge-style(\r
+ $background: $badge-background,\r
+ $color: $badge-font-color\r
+) {\r
+ background: $background;\r
+\r
+ @if $color == auto {\r
+ color: isitlight($background);\r
+ }\r
+ @else {\r
+ color: $color;\r
+ }\r
+}\r
+\r
+@mixin badge(\r
+ $background: $badge-background,\r
+ $color: $badge-color,\r
+ $diameter: $badge-diameter,\r
+ $fontsize: $badge-fontsize\r
+) {\r
+ @extend %badge;\r
+ @include badge-layout($fontsize, $diameter);\r
+ @include badge-style($background, $color);\r
+}\r
+\r
+@include exports(badge) {\r
+ .badge {\r
+ @include badge;\r
+\r
+ &.secondary {\r
+ @include badge-style($secondary-color, auto);\r
+ }\r
+ @each $color in map-keys($foundation-colors) {\r
+ &.#{$color} {\r
+ $color-value: map-get($foundation-colors, $color);\r
+ @include badge-style($color-value, auto);\r
+ }\r
+ }\r
+ }\r
+}\r