import { css } from 'lit'

export default css`
    :host {
        --border-radius: var(--terra-skeleton-border-radius);
        --color: var(--terra-skeleton-background-color);
        --sheen-color: var(--terra-skeleton-sheen-color);

        display: block;
        position: relative;
    }

    .skeleton {
        display: flex;
        width: 100%;
        height: 100%;
        min-height: var(--terra-skeleton-min-height);
        margin-bottom: var(--terra-skeleton-margin-bottom);
    }

    .skeleton:last-child {
        margin-bottom: 0;
    }

    .skeleton__indicator {
        flex: 1 1 auto;
        background: var(--color);
        border-radius: var(--border-radius);
    }

    .skeleton--sheen .skeleton__indicator {
        background: linear-gradient(
            270deg,
            var(--sheen-color),
            var(--color),
            var(--color),
            var(--sheen-color)
        );
        background-size: 400% 100%;
        animation: sheen 8s ease-in-out infinite;
    }

    .skeleton--pulse .skeleton__indicator {
        animation: pulse 2s ease-in-out 0.5s infinite;
    }

    /* Forced colors mode */
    @media (forced-colors: active) {
        :host {
            --color: GrayText;
        }
    }

    @keyframes sheen {
        0% {
            background-position: 200% 0;
        }
        to {
            background-position: -200% 0;
        }
    }

    @keyframes pulse {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 0.4;
        }
        100% {
            opacity: 1;
        }
    }

    .skeleton {
        display: flex;
        width: 100%;
        height: 100%;
        min-height: 1rem;
    }

    .skeleton__indicator {
        flex: 1 1 auto;
        background: var(--color);
        border-radius: var(--border-radius);
    }

    .skeleton--sheen .skeleton__indicator {
        background: linear-gradient(
            270deg,
            var(--sheen-color),
            var(--color),
            var(--color),
            var(--sheen-color)
        );
        background-size: 400% 100%;
        animation: sheen 8s ease-in-out infinite;
    }

    .skeleton--pulse .skeleton__indicator {
        animation: pulse 2s ease-in-out 0.5s infinite;
    }

    /* Forced colors mode */
    @media (forced-colors: active) {
        :host {
            --color: GrayText;
        }
    }

    @keyframes sheen {
        0% {
            background-position: 200% 0;
        }
        to {
            background-position: -200% 0;
        }
    }

    @keyframes pulse {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 0.4;
        }
        100% {
            opacity: 1;
        }
    }
`
