@lumx/core 3.0.7 → 3.1.0

package/src/scss/components/text-field/_index.scss

@@ -0,0 +1,323 @@
+@use "sass:math";
+
+/* ==========================================================================
+   Text field
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-text-field {
+    $self: &;
+
+    --lumx-text-field-wrapper-padding-vertical:
+        calc(
+            (var(--lumx-text-field-input-min-height) - var(--lumx-material-text-field-input-content-line-height)) / 2
+        );
+
+    padding-top: var(--lumx-material-text-field-padding-top);
+    padding-bottom: var(--lumx-material-text-field-padding-bottom);
+
+    &__header {
+        display: flex;
+        align-items: center;
+        margin-bottom: var(--lumx-material-text-field-header-wrapper-margin-bottom);
+    }
+
+    &__label {
+        @include lumx-text-field-label;
+
+        flex: 1 1 auto;
+
+        #{$self}--theme-light & {
+            @include lumx-text-field-label-color(
+                lumx-base-const("state", "DEFAULT"),
+                lumx-base-const("theme", "LIGHT")
+            );
+        }
+
+        #{$self}--theme-dark & {
+            @include lumx-text-field-label-color(lumx-base-const("state", "DEFAULT"), lumx-base-const("theme", "DARK"));
+        }
+    }
+
+    &__char-counter {
+        display: flex;
+        flex-shrink: 0;
+        align-items: center;
+        margin-left: auto;
+
+        span {
+            font-size: var(--lumx-material-text-field-header-label-font-size);
+            font-weight: var(--lumx-material-text-field-header-label-font-weight);
+            line-height: var(--lumx-material-text-field-header-label-line-height);
+
+            #{$self}--theme-light & {
+                color: lumx-color-variant("dark", "L2");
+            }
+
+            #{$self}--theme-dark & {
+                color: lumx-color-variant("light", "L2");
+            }
+        }
+
+        i {
+            margin-left: math.div($lumx-spacing-unit, 2);
+
+            #{$self}--theme-light & {
+                color: lumx-color-variant("red", "N");
+            }
+
+            #{$self}--theme-dark & {
+                color: lumx-color-variant("light", "N");
+            }
+        }
+    }
+
+    &__wrapper {
+        #{$self}--theme-light & {
+            @include lumx-text-field-wrapper(lumx-base-const("theme", "LIGHT"));
+        }
+
+        #{$self}--theme-dark & {
+            @include lumx-text-field-wrapper(lumx-base-const("theme", "DARK"));
+        }
+    }
+
+    &__input-icon {
+        #{$self}--theme-light & {
+            @include lumx-text-field-input-icon(lumx-base-const("theme", "LIGHT"));
+            @include lumx-text-field-input-content-color(
+                lumx-base-const("state", "DEFAULT"),
+                lumx-base-const("theme", "LIGHT")
+            );
+        }
+
+        #{$self}--theme-dark & {
+            @include lumx-text-field-input-icon(lumx-base-const("theme", "DARK"));
+            @include lumx-text-field-input-content-color(
+                lumx-base-const("state", "DEFAULT"),
+                lumx-base-const("theme", "DARK")
+            );
+        }
+    }
+
+    &__input-wrapper {
+        @include lumx-text-field-input-wrapper;
+    }
+
+    &__input-native {
+        #{$self}--theme-light & {
+            @include lumx-text-field-input-native(lumx-base-const("theme", "LIGHT"));
+            @include lumx-text-field-input-content-color(
+                lumx-base-const("state", "DEFAULT"),
+                lumx-base-const("theme", "LIGHT")
+            );
+
+            &::placeholder {
+                @include lumx-text-field-input-placeholder-color(
+                    lumx-base-const("state", "DEFAULT"),
+                    lumx-base-const("theme", "LIGHT")
+                );
+            }
+        }
+
+        #{$self}--theme-dark & {
+            @include lumx-text-field-input-native(lumx-base-const("theme", "DARK"));
+            @include lumx-text-field-input-content-color(
+                lumx-base-const("state", "DEFAULT"),
+                lumx-base-const("theme", "DARK")
+            );
+
+            &::placeholder {
+                @include lumx-text-field-input-placeholder-color(
+                    lumx-base-const("state", "DEFAULT"),
+                    lumx-base-const("theme", "DARK")
+                );
+            }
+        }
+
+        #{$self}--has-chips & {
+            flex: 1 1 auto;
+            width: auto;
+            min-width: $lumx-text-field-min-width;
+            margin: $lumx-chip-group-spacing 0;
+            line-height: var(--lumx-material-chip-size-s-height);
+        }
+
+        &--textarea {
+            resize: none;
+        }
+    }
+
+    &__input-clear,
+    &__after-element {
+        @include lumx-text-field-input-clear;
+    }
+
+    &__chips {
+        @include lumx-text-field-chips;
+    }
+
+    &__helper {
+        margin-top: $lumx-spacing-unit;
+    }
+}
+
+/* Text field states
+   ========================================================================== */
+
+// Disabled state
+.#{$lumx-base-prefix}-text-field--is-disabled {
+    .#{$lumx-base-prefix}-text-field__wrapper {
+        @include lumx-state-disabled-input;
+    }
+
+    &.#{$lumx-base-prefix}-text-field--theme-light {
+        .#{$lumx-base-prefix}-text-field__label,
+        .#{$lumx-base-prefix}-text-field__helper {
+            @include lumx-state-disabled-text(lumx-base-const("theme", "LIGHT"));
+        }
+    }
+
+    &.#{$lumx-base-prefix}-text-field--theme-dark {
+        .#{$lumx-base-prefix}-text-field__label,
+        .#{$lumx-base-prefix}-text-field__helper {
+            @include lumx-state-disabled-text(lumx-base-const("theme", "DARK"));
+        }
+    }
+}
+
+// Hover state
+.#{$lumx-base-prefix}-text-field--theme-light {
+    .#{$lumx-base-prefix}-text-field__wrapper:hover {
+        @include lumx-text-field-wrapper-state(lumx-base-const("state", "HOVER"), lumx-base-const("theme", "LIGHT"));
+    }
+
+    .#{$lumx-base-prefix}-text-field__input-icon,
+    .#{$lumx-base-prefix}-text-field__input-native {
+        @include lumx-text-field-input-content-color(
+            lumx-base-const("state", "HOVER"),
+            lumx-base-const("theme", "LIGHT")
+        );
+    }
+
+    .#{$lumx-base-prefix}-text-field__input-native::placeholder {
+        @include lumx-text-field-input-placeholder-color(
+            lumx-base-const("state", "HOVER"),
+            lumx-base-const("theme", "LIGHT")
+        );
+    }
+}
+
+.#{$lumx-base-prefix}-text-field--theme-dark {
+    .#{$lumx-base-prefix}-text-field__wrapper:hover {
+        @include lumx-text-field-wrapper-state(lumx-base-const("state", "HOVER"), lumx-base-const("theme", "DARK"));
+    }
+
+    .#{$lumx-base-prefix}-text-field__input-icon,
+    .#{$lumx-base-prefix}-text-field__input-native {
+        @include lumx-text-field-input-content-color(
+            lumx-base-const("state", "HOVER"),
+            lumx-base-const("theme", "DARK")
+        );
+    }
+
+    .#{$lumx-base-prefix}-text-field__input-native::placeholder {
+        @include lumx-text-field-input-placeholder-color(
+            lumx-base-const("state", "HOVER"),
+            lumx-base-const("theme", "DARK")
+        );
+    }
+}
+
+// Focus state
+.#{$lumx-base-prefix}-text-field--theme-light.#{$lumx-base-prefix}-text-field--is-focus {
+    .#{$lumx-base-prefix}-text-field__label {
+        @include lumx-text-field-label-color(lumx-base-const("state", "FOCUS"), lumx-base-const("theme", "LIGHT"));
+    }
+
+    .#{$lumx-base-prefix}-text-field__wrapper {
+        @include lumx-text-field-wrapper-state(lumx-base-const("state", "FOCUS"), lumx-base-const("theme", "LIGHT"));
+    }
+
+    .#{$lumx-base-prefix}-text-field__input-icon,
+    .#{$lumx-base-prefix}-text-field__input-native {
+        @include lumx-text-field-input-content-color(
+            lumx-base-const("state", "FOCUS"),
+            lumx-base-const("theme", "LIGHT")
+        );
+    }
+
+    .#{$lumx-base-prefix}-text-field__input-native::placeholder {
+        @include lumx-text-field-input-placeholder-color(
+            lumx-base-const("state", "FOCUS"),
+            lumx-base-const("theme", "LIGHT")
+        );
+    }
+}
+
+.#{$lumx-base-prefix}-text-field--theme-dark.#{$lumx-base-prefix}-text-field--is-focus {
+    .#{$lumx-base-prefix}-text-field__label {
+        @include lumx-text-field-label-color(lumx-base-const("state", "FOCUS"), lumx-base-const("theme", "DARK"));
+    }
+
+    .#{$lumx-base-prefix}-text-field__wrapper {
+        @include lumx-text-field-wrapper-state(lumx-base-const("state", "FOCUS"), lumx-base-const("theme", "DARK"));
+    }
+
+    .#{$lumx-base-prefix}-text-field__input-icon,
+    .#{$lumx-base-prefix}-text-field__input-native {
+        @include lumx-text-field-input-content-color(
+            lumx-base-const("state", "FOCUS"),
+            lumx-base-const("theme", "DARK")
+        );
+    }
+
+    .#{$lumx-base-prefix}-text-field__input-native::placeholder {
+        @include lumx-text-field-input-placeholder-color(
+            lumx-base-const("state", "FOCUS"),
+            lumx-base-const("theme", "DARK")
+        );
+    }
+}
+
+/* Text field validity
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-text-field--theme-light.#{$lumx-base-prefix}-text-field--is-valid {
+    .#{$lumx-base-prefix}-text-field__wrapper {
+        @include lumx-text-field-wrapper-validity("valid", lumx-base-const("theme", "LIGHT"));
+    }
+
+    .#{$lumx-base-prefix}-text-field__input-validity {
+        @include lumx-text-field-input-validity("valid", lumx-base-const("theme", "LIGHT"));
+    }
+}
+
+.#{$lumx-base-prefix}-text-field--theme-light.#{$lumx-base-prefix}-text-field--has-error {
+    .#{$lumx-base-prefix}-text-field__wrapper {
+        @include lumx-text-field-wrapper-validity("error", lumx-base-const("theme", "LIGHT"));
+    }
+
+    .#{$lumx-base-prefix}-text-field__input-validity {
+        @include lumx-text-field-input-validity("error", lumx-base-const("theme", "LIGHT"));
+    }
+}
+
+.#{$lumx-base-prefix}-text-field--theme-dark.#{$lumx-base-prefix}-text-field--is-valid {
+    .#{$lumx-base-prefix}-text-field__wrapper {
+        @include lumx-text-field-wrapper-validity("valid", lumx-base-const("theme", "DARK"));
+    }
+
+    .#{$lumx-base-prefix}-text-field__input-validity {
+        @include lumx-text-field-input-validity("valid", lumx-base-const("theme", "DARK"));
+    }
+}
+
+.#{$lumx-base-prefix}-text-field--theme-dark.#{$lumx-base-prefix}-text-field--has-error {
+    .#{$lumx-base-prefix}-text-field__wrapper {
+        @include lumx-text-field-wrapper-validity("error", lumx-base-const("theme", "DARK"));
+    }
+
+    .#{$lumx-base-prefix}-text-field__input-validity {
+        @include lumx-text-field-input-validity("error", lumx-base-const("theme", "DARK"));
+    }
+}

package/src/scss/components/text-field/_mixins.scss

@@ -0,0 +1,149 @@
+@use "sass:math";
+
+@mixin lumx-text-field-label() {
+    font-size: var(--lumx-material-text-field-header-label-font-size);
+    font-weight: var(--lumx-material-text-field-header-label-font-weight);
+    line-height: var(--lumx-material-text-field-header-label-line-height);
+}
+
+@mixin lumx-text-field-label-color($state, $theme) {
+    color: var(--lumx-text-field-#{$state}-#{$theme}-header-label-color);
+}
+
+@mixin lumx-text-field-wrapper($theme) {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    min-height: var(--lumx-text-field-input-min-height);
+    padding: 0 var(--lumx-text-field-input-padding-horizontal);
+    background-color: var(--lumx-text-field-state-default-#{$theme}-input-background-color);
+    border-radius: var(--lumx-text-field-input-border-radius);
+    outline: none;
+    transition-duration: $lumx-text-field-transition-duration;
+    transition-property: background-color, box-shadow;
+
+    &::before {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        pointer-events: none;
+        content: "";
+        border: 0 solid var(--lumx-text-field-state-default-#{$theme}-input-border-color);
+        border-width: var(--lumx-text-field-state-default-input-border-top-width) var(--lumx-text-field-state-default-input-border-right-width) var(--lumx-text-field-state-default-input-border-bottom-width)  var(--lumx-text-field-state-default-input-border-left-width);
+        border-radius: var(--lumx-text-field-input-border-radius);
+    }
+}
+
+@mixin lumx-text-field-wrapper-state($state, $theme) {
+    background-color: var(--lumx-text-field-#{$state}-#{$theme}-input-background-color);
+
+    &::before {
+        border-color: var(--lumx-text-field-#{$state}-#{$theme}-input-border-color);
+        border-width: var(--lumx-text-field-#{$state}-input-border-top-width) var(--lumx-text-field-#{$state}-input-border-right-width) var(--lumx-text-field-#{$state}-input-border-bottom-width) var(--lumx-text-field-#{$state}-input-border-left-width);
+    }
+}
+
+@mixin lumx-text-field-wrapper-validity($validity, $theme) {
+    &::before {
+        border-width: var(--lumx-text-field-state-focus-input-border-top-width) var(--lumx-text-field-state-focus-input-border-right-width) var(--lumx-text-field-state-focus-input-border-bottom-width) var(--lumx-text-field-state-focus-input-border-left-width);
+
+        @if $theme == lumx-base-const("theme", "LIGHT") {
+            @if $validity == "valid" {
+                border-color: lumx-color-variant("green", "N");
+            } @else if $validity == "error" {
+                border-color: lumx-color-variant("red", "N");
+            }
+        } @else if $theme == lumx-base-const("theme", "DARK") {
+            border-color: lumx-color-variant("light", "N");
+        }
+    }
+}
+
+@mixin lumx-text-field-input-icon($theme) {
+    flex-shrink: 0;
+    margin-top: calc(var(--lumx-text-field-wrapper-padding-vertical) + ((var(--lumx-material-text-field-input-content-line-height) - var(--lumx-size-xs)) / 2));
+    margin-right: $lumx-spacing-unit;
+
+    @if $theme == lumx-base-const("theme", "LIGHT") {
+        color: lumx-color-variant("dark", "N");
+    } @else if $theme == lumx-base-const("theme", "DARK") {
+        color: lumx-color-variant("light", "N");
+    }
+}
+
+@mixin lumx-text-field-input-wrapper() {
+    flex: 1 1 auto;
+    padding: var(--lumx-text-field-wrapper-padding-vertical) 0;
+}
+
+@mixin lumx-text-field-input-native($theme) {
+    display: block;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    font-size: var(--lumx-material-text-field-input-content-font-size);
+    line-height: var(--lumx-material-text-field-input-content-line-height);
+    background-color: transparent;
+    border: none;
+    outline: none;
+
+    &[type="number"] {
+        appearance: textfield;
+    }
+
+    &[type="number"]::-webkit-inner-spin-button,
+    &[type="number"]::-webkit-outer-spin-button {
+        appearance: none;
+    }
+
+    @if $theme == lumx-base-const("theme", "LIGHT") {
+        color: lumx-color-variant("dark", "N");
+    } @else if $theme == lumx-base-const("theme", "DARK") {
+        color: lumx-color-variant("light", "N");
+    }
+}
+
+@mixin lumx-text-field-input-content-color($state, $theme) {
+    color: var(--lumx-text-field-#{$state}-#{$theme}-input-content-color);
+}
+
+@mixin lumx-text-field-input-placeholder-color($state, $theme) {
+    color: var(--lumx-text-field-#{$state}-#{$theme}-input-placeholder-color);
+}
+
+@mixin lumx-text-field-input-validity($validity, $theme) {
+    flex-shrink: 0;
+    margin-top: calc(var(--lumx-text-field-wrapper-padding-vertical) + ((var(--lumx-material-text-field-input-content-line-height) - var(--lumx-size-xxs)) / 2));
+    margin-left: $lumx-spacing-unit;
+
+    @if $theme == lumx-base-const("theme", "LIGHT") {
+        @if $validity == "valid" {
+            color: lumx-color-variant("green", "N");
+        } @else if $validity == "error" {
+            color: lumx-color-variant("red", "N");
+        }
+    } @else if $theme == lumx-base-const("theme", "DARK") {
+        color: lumx-color-variant("light", "N");
+    }
+}
+
+@mixin lumx-text-field-input-clear() {
+    flex-shrink: 0;
+    margin: calc(var(--lumx-text-field-wrapper-padding-vertical) + ((var(--lumx-material-text-field-input-content-line-height) - (var(--lumx-button-height) / 1.5)) / 2)) math.div($lumx-spacing-unit, 2);
+    margin-right: 0;
+}
+
+@mixin lumx-text-field-chips() {
+    display: flex;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+    align-items: center;
+    margin: calc((var(--lumx-text-field-input-min-height) - var(--lumx-size-s) - 6px) / 2) 0;
+
+    .#{$lumx-base-prefix}-chip {
+        margin: $lumx-chip-group-spacing 0;
+        margin-right: $lumx-chip-group-spacing * 2;
+    }
+}

package/src/scss/components/text-field/_variables.scss

@@ -0,0 +1,2 @@
+$lumx-text-field-transition-duration: 100ms;
+$lumx-text-field-min-width: 100px;

package/src/scss/components/thumbnail/_index.scss

@@ -0,0 +1,227 @@
+@use "sass:map";
+@use "sass:math";
+
+/* ==========================================================================
+   Thumbnail
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-thumbnail {
+    $self: &;
+
+    position: relative;
+    flex-shrink: 0;
+    padding: 0;
+    background: none;
+    border: none;
+    outline: none;
+
+    &--fill-height {
+        &,
+        #{$self}__background {
+            display: flex;
+            flex: 1 1 auto;
+            flex-direction: column;
+            justify-content: center;
+            height: fit-content;
+            min-height: 100%;
+        }
+
+        #{$self}__image {
+            width: unset;
+        }
+    }
+
+    &__background {
+        position: relative;
+        width: 100%;
+
+        #{$self}--variant-rounded & {
+            border-radius: var(--lumx-border-radius);
+        }
+    }
+
+    &__image {
+        display: block;
+        max-width: 100%;
+        max-height: 100%;
+        font-size: 0;
+
+        &--has-defined-size {
+            width: fit-content;
+            height: fit-content;
+        }
+    }
+
+    &__background,
+    &__image {
+        overflow: hidden;
+
+        #{$self}--align-left & {
+            margin-right: auto;
+        }
+
+        #{$self}--align-center & {
+            margin: 0 auto;
+        }
+
+        #{$self}--align-right & {
+            margin-left: auto;
+        }
+    }
+
+    &__badge {
+        position: absolute;
+        right: math.div(-$lumx-spacing-unit, 2);
+        bottom: math.div(-$lumx-spacing-unit, 2);
+    }
+}
+
+/* Thumbnail sizes
+   ========================================================================== */
+
+@each $key, $size in $lumx-sizes {
+    .#{$lumx-base-prefix}-thumbnail--size-#{$key} {
+        width: $size;
+    }
+}
+
+/* Thumbnail aspect ratio
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-thumbnail:not(.#{$lumx-base-prefix}-thumbnail--aspect-ratio-original) {
+    .#{$lumx-base-prefix}-thumbnail__image {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: center;
+    }
+}
+
+@each $key, $aspect-ratio in $lumx-thumbnail-aspect-ratio {
+    .#{$lumx-base-prefix}-thumbnail--aspect-ratio-#{$key}:not(.#{$lumx-base-prefix}-thumbnail--fill-height)
+    .#{$lumx-base-prefix}-thumbnail__background {
+        padding-top: $aspect-ratio;
+    }
+}
+
+/* Thumbnail states
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-thumbnail--is-clickable {
+    &:not(.#{$lumx-base-prefix}-thumbnail--fill-height) {
+        display: block;
+    }
+
+    position: relative;
+    cursor: pointer;
+
+    &::after {
+        @include lumx-state-transition;
+
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        pointer-events: none;
+        content: "";
+    }
+
+    /* Hover */
+    &:hover::after,
+    &:focus::after {
+        @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark");
+    }
+
+    /* Active */
+    &:active::after {
+        @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark");
+    }
+}
+
+/* Focused (variant rounded) */
+.#{$lumx-base-prefix}-thumbnail--variant-rounded.#{$lumx-base-prefix}-thumbnail--is-clickable {
+    &[data-focus-visible-added]::after {
+        border-radius: var(--lumx-border-radius);
+    }
+}
+
+/* Focused (light theme) */
+.#{$lumx-base-prefix}-thumbnail--theme-light.#{$lumx-base-prefix}-thumbnail--is-clickable {
+    &[data-focus-visible-added]::after {
+        @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "dark");
+    }
+}
+
+/* Focused (dark theme) */
+.#{$lumx-base-prefix}-thumbnail--theme-dark.#{$lumx-base-prefix}-thumbnail--is-clickable {
+    &[data-focus-visible-added]::after {
+        @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "light");
+    }
+}
+
+/* Loading state */
+.#{$lumx-base-prefix}-thumbnail--is-loading {
+    &.#{$lumx-base-prefix}-thumbnail--theme-light .#{$lumx-base-prefix}-thumbnail__background {
+        @include lumx-skeleton("light");
+    }
+
+    &.#{$lumx-base-prefix}-thumbnail--theme-dark .#{$lumx-base-prefix}-thumbnail__background {
+        @include lumx-skeleton("dark");
+    }
+}
+
+/* Error state */
+.#{$lumx-base-prefix}-thumbnail--has-error {
+    /** Icon fallback */
+    &.#{$lumx-base-prefix}-thumbnail--has-icon-error-fallback {
+        .#{$lumx-base-prefix}-thumbnail__fallback {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        &.#{$lumx-base-prefix}-thumbnail--theme-light .#{$lumx-base-prefix}-thumbnail__fallback {
+            background-color: lumx-color-variant("dark", "L6");
+        }
+
+        &.#{$lumx-base-prefix}-thumbnail--theme-dark .#{$lumx-base-prefix}-thumbnail__fallback {
+            background-color: lumx-color-variant("light", "L6");
+        }
+    }
+
+    /* Custom fallback */
+    &.#{$lumx-base-prefix}-thumbnail--has-custom-error-fallback {
+        /* Disable aspect ratio */
+        .#{$lumx-base-prefix}-thumbnail__background {
+            padding-top: 0;
+        }
+    }
+}
+
+/* Thumbnail badge mask
+   ========================================================================== */
+
+$badge-radius-size: math.div(map.get($lumx-sizes, lumx-base-const("size", "XS")), 2) + 2;
+
+.#{$lumx-base-prefix}-thumbnail--has-badge {
+    .#{$lumx-base-prefix}-thumbnail__background,
+    .#{$lumx-base-prefix}-thumbnail__fallback {
+        mask-image:
+            radial-gradient(
+                circle at calc(100% - #{$badge-radius-size - 6}) calc(100% - #{$badge-radius-size - 6}),
+                transparent $badge-radius-size,
+                black $badge-radius-size + 1
+            );
+    }
+}