@import '../../../styles/definitions/colors';
@import '../../../styles/definitions/placeholders';

.dotsNav {
    $dot-size: 8;
    $dot-size-px: #{$dot-size}px;
    $dot-padding: 8;
    $dot-total-size: $dot-size + $dot-padding;
    $dot-total-size-px: #{$dot-total-size}px;
    
    &_wrapper {
        position: relative;
        width: 100%;
        // must be as large as the viewport + space for 2 further dots on each side
        max-width: calc(#{$dot-total-size} * (var(--max-dots) + 4) * 1px);
        height: $dot-size-px;
        margin: 0 auto;
        padding: 0;
        z-index: 1;
        overflow: hidden;
    }
    &_viewport {
        max-width: calc(#{$dot-total-size} * var(--max-dots) * 1px);
        position: absolute;
        left: #{$dot-total-size * 2}px;
        top: 0;
        padding: 0;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    &_dot {
        @extend %reset-button;
        display: block;
        padding: 0;
        margin: 0;
        position: relative;
        transform: translateX(calc(var(--dots-translate, 0) * #{$dot-total-size} * -1px));
        transform-origin: 50% 50%;
        transition: transform 0.5s;
        min-width: $dot-total-size-px;
        height: $dot-size-px;
        font-size: 0;
        outline: none;
        cursor: pointer;
        opacity: 0.25;

        &:focus,
        &--active {
            opacity: 0.5;
            &:before {
                background-color: $black;
            }
        }

        &:before {
            content: "";
            display: block;
            width: $dot-size-px;
            height: $dot-size-px;
            border: 1px $black solid;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: $dot-padding * 0.5px;
        }

        &--minus-1 {
            $scale: 0.7;
            transform: translateX(calc(var(--dots-translate, 0) * #{$dot-total-size} * -1px)) scale($scale, $scale);
        }
        &--minus-2, &--minus-3 {
            $scale: 0.2;
            transform: translateX(calc(var(--dots-translate, 0) * #{$dot-total-size} * -1px)) scale($scale, $scale);
        }
    }
}
