@use '../abstract/mixin' as *;

.cycles-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;

    display: flex;
    justify-content: center;
    padding-block: 12px;

    > .container {
        display: flex;

        > .cycles-item-button {
            position: relative;

            color: white;
            padding: 12px 8px;

            word-spacing: -6px;

            text-shadow: 1px -1px 6px #6962c578, -1px 1px 6px #6962c578;

            .background {
                padding-inline: 4px;
            }

            &:hover,
            &.active {
                color: blue;
                text-shadow: none;

                .background {
                    transition: background-color 0.4s ease-in-out;
                    color: blue;
                    background-color: white;
                }
            }
        }

        > .item:not(:last-child) {
            padding-inline-end: 12px;

            &::after {
                content: '';
            }
        }
    }

    .indicator {
        display: none;

        position: absolute;
        bottom: -10px;
        left: calc(50% - 5px);

        width: 10px;
        height: 10px;
        background-color: #7c7c95;
        border-radius: 100%;
    }
}

@include phoneAndSmaller {
    .cycles-overlay {
        justify-content: flex-start;

        padding: 0;
        padding-block-start: 8px;
        padding-inline-start: 8px;

        .container {
            flex-direction: column;
            align-items: flex-start;

            .cycles-item-button {
                padding: 0px;
            }
        }
    }
}
