@lumx/core 3.1.0 → 3.1.2

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

@@ -1,323 +0,0 @@
-@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

@@ -1,149 +0,0 @@
-@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

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

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

@@ -1,227 +0,0 @@
-@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
-            );
-    }
-}