@use "sass:map";
@use "../core/_index.scss" as *;
@use "./_variables.scss" as *;

@mixin kendo-badge--layout() {

    .k-badge {
        padding-inline: var( --INTERNAL--kendo-badge-padding-x, 0 );
        padding-block: var( --INTERNAL--kendo-badge-padding-y, 0 );
        min-width: var( --INTERNAL--kendo-badge-min-width, auto );
        font-size: var( --INTERNAL--kendo-badge-font-size, 1rem );
        font-weight: var( --kendo-badge-font-weight, #{$kendo-badge-font-weight} );
        line-height: var( --INTERNAL--kendo-badge-line-height, normal );
        border-width: var( --kendo-badge-border-width, #{$kendo-badge-border-width} );
        border-style: solid;
        border-color: transparent;
        box-sizing: border-box;
        color: inherit;
        background-color: transparent;
        text-align: center;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }
    }
    .k-badge > * {
        color: inherit;
    }


    // Links
    a.k-badge,
    .k-badge > a {
        text-decoration: none;
    }
    a.k-badge:hover,
    .k-badge > a:hover {
        text-decoration: underline;
    }


    // Icon
    .k-badge-icon {
        max-width: 1em;
        max-height: 1em;
        font-size: inherit;
    }
    .k-badge-icon svg {
        fill: currentColor;
    }

    // Badge sizes
    @each $size, $size-props in $kendo-badge-sizes {
        $_padding-x: map.get( $size-props, padding-x );
        $_padding-y: map.get( $size-props, padding-y );
        $_font-size: map.get( $size-props, font-size );
        $_line-height: map.get( $size-props, line-height );
        $_min-width: map.get( $size-props, min-width );

        .k-badge-#{$size} {
            --INTERNAL--kendo-badge-padding-x: var( --kendo-badge-#{$size}-padding-x, #{$_padding-x} );
            --INTERNAL--kendo-badge-padding-y: var( --kendo-badge-#{$size}-padding-y, #{$_padding-y} );
            --INTERNAL--kendo-badge-font-size: var( --kendo-badge-#{$size}-font-size, #{$_font-size} );
            --INTERNAL--kendo-badge-line-height: var( --kendo-badge-#{$size}-line-height, #{$_line-height} );
            --INTERNAL--kendo-badge-min-width: var( --kendo-badge-#{$size}-min-width, #{$_min-width} );

            &:empty {
                --INTERNAL--kendo-badge-padding-x: var( --kendo-badge-#{$size}-padding-y, #{$_padding-y} );
                --INTERNAL--kendo-badge-padding-y: var( --kendo-badge-#{$size}-padding-y, #{$_padding-y} );

                min-width: auto;
            }
        }
    }

    kendo-badge-container {
        display: inline-block;
    }

    // Badge position
    .k-badge-container {
        position: relative;
        overflow: visible;
    }

    @each $placement, $translate in ("inside": null, "edge": 50, "outside": 100) {

        .k-badge-#{$placement} {
            position: absolute;
            z-index: 9999;

            &.k-top-start {
                @if $translate {
                    transform: translate( -1% * $translate, -1% * $translate );
                }
            }
            &.k-top-end {
                @if $translate {
                    transform: translate( 1% * $translate, -1% * $translate );
                }
            }
            &.k-bottom-start {
                @if $translate {
                    transform: translate( -1% * $translate, 1% * $translate );
                }
            }
            &.k-bottom-end {
                @if $translate {
                    transform: translate( 1% * $translate, 1% * $translate );
                }
            }
        }

        .k-rtl .k-badge-#{$placement},
        [dir="rtl"].k-badge-#{$placement},
        [dir="rtl"] .k-badge-#{$placement} {
            &.k-top-start {
                @if $translate {
                    transform: translate( 1% * $translate, -1% * $translate );
                }
            }
            &.k-top-end {
                @if $translate {
                    transform: translate( -1% * $translate, -1% * $translate );
                }
            }
            &.k-bottom-start {
                @if $translate {
                    transform: translate( 1% * $translate, 1% * $translate );
                }
            }
            &.k-bottom-end {
                @if $translate {
                    transform: translate( -1% * $translate, 1% * $translate );
                }
            }
        }
    }


    // Border cutout
    .k-badge-border-cutout {
        box-shadow: 0 0 0 2px var( --kendo-component-bg, inherit );
    }

}