<!-- TODO: Dark and Light mode -->
<!-- TODO: Automatic center prop -->

<template>
    <div
        class="hy-loader"
        :style="{
            width: width + 'px',
            height: height + 'px',
            borderWidth: line + 'px',
        }"
    ></div>
</template>

<script>
export default {
    name: "HyLoader",
    props: {
        width: {
            type: Number,
            default: 50,
        },
        height: {
            type: Number,
            default: 50,
        },
        line: {
            type: Number,
            default: 4,
        },
    },
};
</script>

<style lang="scss">
.hy-loader {
    position: relative;
    border: 4px solid var(--hy-loader-ring-bg-color);
    border-radius: 50%;
    animation: loader 1.5s cubic-bezier(0.6, 0.3, 0.3, 0.6) infinite;
    margin: 0;
    padding: 0;
}

@keyframes loader {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@media (prefers-color-scheme: light) {
    .hy-loader {
        border-top-color: var(--hy-accent-color);
    }
}

@media (prefers-color-scheme: dark) {
    .hy-loader {
        border-top-color: var(--hy-font-color-white);
    }
}
</style>
