// Name:            Skeleton
// Description:     Component to style skeleton
//
// Component:       `uk-skeleton`
//
// ========================================================================

@use 'sass:map';
@use 'sass:meta';

@use '@broxus/react-uikit/styles/variables' as *;


// Variables
// ========================================================================

@use '../mixins' as *;

$skeleton-from-background: rgb(255 255 255 / 7%) !default;
$skeleton-to-background: rgb(255 255 255 / 2%) !default;


@mixin skeleton-styles {
    /* ========================================================================
       Component: Skeleton
     ========================================================================== */

    .#{$prefix}-skeleton {
        display: inline-block;
        max-width: 100%;
        position: relative;
        z-index: 0;
    }

    .#{$prefix}-skeleton::after {
        animation: 1s linear 0s infinite alternate skeleton;
        background: $skeleton-from-background;
        border-radius: 3px;
        content: '';
        inset: 2px 0;
        position: absolute;
    }

    .#{$prefix}-skeleton-circle::after {
        border-radius: 50%;
        bottom: 0;
        top: 0;
    }

    @keyframes skeleton {
        from {
            background: var(--skeleton-from-background);
        }

        to {
            background: var(--skeleton-to-background);
        }
    }
    @content;
}

@mixin skeleton-tokens {
    --skeleton-from-background: #{$skeleton-from-background};
    --skeleton-to-background: #{$skeleton-to-background};
    @content;
}