@import '../styles/_variables.scss';

.main {
    display: flex;
    align-items: center;

    .dots-container {
        display: flex;

        .dot-container {
            width: auto;
            height: auto;
            padding: 0;
            margin-inline-end: 8px;

            &:last-child {
                margin-inline-end: 0;
            }

            .dot {
                width: 6px;
                height: 6px;
                background-color: $clickable-item;
                opacity: 0.6;
                border-radius: 50%;
                display: inline-block;
            }

            .default-cursor > * {
                cursor: default;
            }

            .active.active {
                background-color: $button-color;
                opacity: 1;
            }
        }
    }

    .arrow {
        color: $clickable-item;

        &:not(.disabled):hover {
            color: $button-color !important;
            opacity: 1;
        }

        &:first-child {
            margin-inline-end: 13px;
        }
        &:last-child {
            margin-inline-start: 13px;
        }
    }

    .left-arrow {
        transform: rotate(-180deg);
    }
}