@import "../variables/variables";
@import "../mixins/private/button-mixins";
@import "../mixins/private/token-mixins";

.skeleton {
    container-name: skeleton-container;
    container-type: inline-size;
    cursor: progress;
    width: 100%;
}

.skeleton__avatar,
.skeleton__button,
.skeleton__text,
.skeleton__image,
.skeleton__textbox {
    @include background-token(skeleton-background, color-loading-fill);

    width: 100%;
}

/* TODO: Need to swap these with component css variables and expose it instead */
.skeleton__avatar {
    border-radius: var(--avatar-border-radius, 50%);
    height: 48px;
    width: 48px;
}

.skeleton__button {
    border-radius: var(--btn-border-radius, calc($button-height-regular / 2));
    height: $button-height-regular;
}

.skeleton__button--small {
    border-radius: var(--btn-border-radius, calc($button-height-small / 2));
    height: $button-height-small;
}

.skeleton__button--large {
    border-radius: var(--btn-border-radius, calc($button-height-large / 2));
    height: $button-height-large;
}

.skeleton__text {
    border-radius: var(--text-border-radius, 3px);
    height: 16px;
    width: calc(100% - var(--spacing-300));
}

.skeleton__text::after {
    height: 16px;
    margin-top: calc(16px + var(--spacing-100));
}

.skeleton__text--large {
    height: 24px;
}

.skeleton__text--large::after {
    height: 24px;
    margin-top: calc(24px + var(--spacing-100));
}

.skeleton__text--multiline {
    margin-bottom: var(--spacing-300);
    position: relative;
    width: calc(100% - var(--spacing-300));
}

.skeleton__text--multiline::after {
    background: inherit;
    content: "";
    position: absolute;
    width: calc(100% - var(--spacing-700));
}

.skeleton__text--large.skeleton__text--multiline {
    margin-bottom: var(--spacing-400);
}

.skeleton__textbox {
    @include border-radius-token(textbox-border-radius, border-radius-50);

    height: 48px;
}

.skeleton__image {
    @include border-radius-token(image-border-radius, border-radius-50);

    height: 100%;
    max-width: initial;
}

/* TODO: Use aspect-ratio : 1 / 1 to set as square when we have browser support, till then */
/* using pseudo element to set as square */
.skeleton__image::after {
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}

span.skeleton__avatar,
span.skeleton__button,
span.skeleton__text,
span.skeleton__image,
span.skeleton__textbox {
    display: inline-block;
}

span.skeleton__avatar:not(:last-child),
span.skeleton__button:not(:last-child),
span.skeleton__text:not(:last-child),
span.skeleton__image:not(:last-child),
span.skeleton__textbox:not(:last-child) {
    margin-inline-end: var(--spacing-100);
}

div.skeleton__avatar:not(:last-child),
div.skeleton__button:not(:last-child),
div.skeleton__text:not(:last-child),
div.skeleton__image:not(:last-child),
div.skeleton__textbox:not(:last-child) {
    margin-block-end: var(--spacing-150);
}

.skeleton--on-secondary {
    --skeleton-background: var(--color-loading-fill-on-secondary);
}

@media screen and (max-width: $_screen-size-SM) {
    .skeleton {
        --skeleton-background: var(--color-loading-shimmer);
    }

    .skeleton--on-secondary {
        --skeleton-background: var(--color-loading-shimmer-on-secondary);
    }
}

.skeleton--purple {
    --skeleton-background: var(--color-loading-ai-gradient-purple-subtle);
}

.skeleton--green {
    --skeleton-background: var(--color-loading-ai-gradient-green-subtle);
}

.skeleton--blue {
    --skeleton-background: var(--color-loading-ai-gradient-blue-subtle);
}

@media (prefers-reduced-motion: no-preference) {
    @keyframes loading-frames {
        0% {
            background-position: 0% 0%;
        }
        50% {
            background-position: 45% 0%;
        }
        100% {
            background-position: 90% 0%;
        }
    }

    @keyframes fade-in {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    .skeleton__avatar,
    .skeleton__button,
    .skeleton__text,
    .skeleton__image,
    .skeleton__textbox {
        /*  setting animation-iteration-count to 6 (5000/833ms)    */
        /*  so it does not exceed 5s per WCAG 2.2.2    */
        animation:
            fade-in 500ms forwards,
            loading-frames 833ms 667ms linear 6;
        animation-fill-mode: both;
        background-size: 200%;
    }
}

/* A progressive enhancement to make the skeleton image rounded */
@container skeleton-container (width > 79px) {
    .skeleton__image {
        @include border-radius-token(image-border-radius, border-radius-100);
    }
}

[dir="rtl"] {
    .skeleton__avatar,
    .skeleton__button,
    .skeleton__text,
    .skeleton__image,
    .skeleton__textbox {
        animation-direction: normal, reverse;
    }

    .skeleton__text--multiline::after {
        left: var(--spacing-700);
    }
}
