@import 'settings';

$numItemsInLoop: 6;
$degreePerItem: 360 / $numItemsInLoop;
$circleRadius: 400px;
$colorList: linear-gradient(0deg, #f06e47, #ffab4a), #eb5a46, #7b8fd1, #29cce5, #42548e, $accent-color, #000;


.creationLoop-container {
    background-color: #7b8fd1;
    padding: 200px 0;
}

.creationLoop {

    margin: 0 auto;

    position: relative;
    width: 2 * $circleRadius;
    height: 2 * $circleRadius;

    .creationLoop-video {
        transform: translate3d(-50%, -50%, 0);
        width: #{$circleRadius*2 - 200};
        width: 600px;
        height: 350px;

        position: absolute;
        left: $circleRadius;
        top: $circleRadius;

        iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        video {
            object-fit: cover;
        }
    }

    .creationLoop-item {
        &.active {
            border: 5px solid $accent-color;

        }

        position: absolute;
        top: 50%;
        left: 50%;

        width: 200px;
        height: 200px;

        border-radius: 50%;
        font-size: 1.5rem;

        cursor: pointer;
        border: 5px solid #fff;
        background: rgba(255, 255, 255, 0.2);

        display: table;

        h3 {
            color: #fff;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

    }

    @for $i from 0 through $numItemsInLoop {
        .creationLoop-item:nth-child(#{$i+1}) {
            // background: nth($colorList, $i+1);
            transform: translate3d(-50%, -50%, 0) rotate(#{-90 + $i * $degreePerItem}deg) translate($circleRadius) rotate(#{90 + -$i * $degreePerItem}deg)
        }
    }
}
