@charset "UTF-8";

@import "../core/index-noreset.scss";
@import "./scss/function";
@import "./scss/mixin";
@import "./scss/placeholder";
@import "./scss/variable";

.#{$css-prefix} {
    &badge {
        @include box-sizing;
        /* @include global-font; */

        @include badge-bounding();

        .#{$css-prefix}badge-count {
            @include badge-state(
                $color: $badge-color,
                $bgColor: $badge-color-bg,
                $borderRadius: $badge-size-count-border-radius
            );
            @include badge-size(
                $width: $badge-size-count-width,
                $minWidth: $badge-size-count-min-width,
                $height: $badge-size-count-height,
                $padding: $badge-size-count-padding,
                $fontSize: $badge-size-count-font,
                $lineHeight: $badge-size-count-lineheight
            );
            top: -.5em;
            border: $badge-size-count-border-width solid $badge-normal-count-border-color;
        }

        .#{$css-prefix}badge-dot {
            @include badge-state(
                $color: $badge-dot-color,
                $bgColor: $badge-dot-color-bg,
                $borderRadius: $badge-size-dot-border-radius
            );
            @include badge-size(
                $width: $badge-size-dot-width,
                $minWidth: $badge-size-dot-min-width,
                $height: $badge-size-dot-height,
                $padding: $badge-size-dot-padding,
                $fontSize: 1px,
                $lineHeight: 1
            );
            top: -.5em;
        }

        .#{$css-prefix}badge-custom {
            line-height: 1.166667;
            white-space: nowrap;
            font-size: $font-size-caption;
            padding-left: $badge-size-custom-padding-lr;
            padding-right: $badge-size-custom-padding-lr;
            border-radius: $badge-size-custom-border-radius;
            transform: translateX(-50%);

            > * {
                line-height: 1;
            }

            > i,
            > .#{$css-prefix}icon {
                &:before {
                    font-size: inherit;
                    width: auto;
                    vertical-align: top;
                }
            }
        }

        .#{$css-prefix}badge-scroll-number {
            position: absolute;
            top: -4px;
            z-index: 10;
            overflow: hidden;
            transform-origin: left center;
            transform: translateX(50%);
            right: 0;
        }

        &-scroll-number-only {
            position: relative;
            display: inline-block;
            transition: transform $motion-duration-immediately $motion-linear, -webkit-transform $motion-duration-immediately $motion-linear;
            min-width: $badge-size-dot-min-width;

            span {
                display: block;
                height: $badge-size-count-height;
                line-height: $badge-size-count-height;
                font-size: $badge-size-count-font;
            }
        }

        &-not-a-wrapper &-count,
        &-not-a-wrapper &-custom {
            position: relative;
            display: block;
            top: auto;
            transform: translateX(0);
        }

        &-not-a-wrapper &-dot {
            position: relative;
            display: block;
            top: auto;
            transform: translateX(0);
        }

        &-list-wrapper {
            margin-left: 0;
            li {
                margin-bottom: $badge-size-list-margin;
                list-style: none;
            }
        }
    }
}

@import './rtl.scss';