@import '../../styles/variables';

@keyframes bdl-PreviewLoadingRing-spin {
    100% {
        transform: rotate(360deg);
    }
}

@mixin bdl-PreviewLoadingRing-theme($color) {
    .bdl-PreviewLoadingRing-border {
        &::before {
            background: linear-gradient(0deg, rgba($color, 1) 50%, rgba($color, .9) 100%) 0 0 no-repeat, linear-gradient(90deg, rgba($color, .9) 0%, rgba($color, .6) 100%) 100% 0 no-repeat, linear-gradient(180deg, rgba($color, .6) 0%, rgba($color, .3) 100%) 100% 100% no-repeat, linear-gradient(360deg, rgba($color, .3) 0%, rgba($color, 0) 100%) 0 100% no-repeat;
            background-size: 50% 50%;
        }
    }

    .bdl-PreviewLoadingRing-content {
        background-color: $color;
    }
}

.bdl-PreviewLoadingRing {
    position: relative;
    width: 160px;
    height: 160px;
    border-radius: 50%;

    &.bdl-PreviewLoadingRing--dark {
        @include bdl-PreviewLoadingRing-theme($black);
    }

    &.bdl-PreviewLoadingRing--light {
        @include bdl-PreviewLoadingRing-theme($white);
    }
}

.bdl-PreviewLoadingRing-border,
.bdl-PreviewLoadingRing-content {
    position: absolute;
    border-radius: 50%;
}

.bdl-PreviewLoadingRing-border {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: $bdl-box-blue; // Color of the ring
    animation: bdl-PreviewLoadingRing-spin 1s infinite linear;

    &::before {
        position: absolute;
        top: -1px;
        right: -1px;
        bottom: -1px;
        left: -1px;
        border-radius: 50%;
        content: '';
    }
}

.bdl-PreviewLoadingRing-content {
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
    display: flex;
    flex: 1 1 100%;
    align-items: center;
    justify-content: center;
}