@import 'commons';
$m-defilement-horizontal-automatique--largueur-bouton: 22px;

.m-auto-horizontal-scroll {
    position: relative;
    z-index: 0;

    &__body {
        position: relative;
        z-index: 0;
        width: 100%;
        flex: 1 1 auto;
        overflow-x: auto;
        overflow-y: hidden;

        @include m-scrollbar();

        &::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }
    }

    &__button-area {
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1px;
        background: var(--m-auto-horizontal-scroll--button-background);
        opacity: 1;

        $transparent-color: rgba(255, 255, 255, 0);

        &.m--is-left {
            left: 0;

            &::before {
                transition: left $m-transition-duration linear;
                right: - $m-space;
                background-image: linear-gradient(90deg, var(--m-auto-horizontal-scroll--button-background), $transparent-color);
            }
        }

        &.m--is-right {
            right: 0;

            &::after {
                transition: right $m-transition-duration linear;
                left: - $m-space;
                background-image: linear-gradient(90deg, $transparent-color, var(--m-auto-horizontal-scroll--button-background));
            }
        }

        &::before,
        &::after {
            transition: opacity $m-transition-duration linear, visibility $m-transition-duration linear;
            position: absolute;
            top: 0;
            bottom: 0;
            z-index: -1;
            width: $m-space;
        }

        &.m--is-enter-active,
        &.m--is-leave-active {
            transition: opacity $m-transition-duration ease;
        }

        &.m--is-enter,
        &.m--is-leave-to {
            opacity: 0;
        }

    }

    &.m--has-previous-button {
        .m-auto-horizontal-scroll__button-area {
            &.m--is-left {
                width: $m-defilement-horizontal-automatique--largueur-bouton;
            }
        }
    }

    &.m--has-next-button {
        .m-auto-horizontal-scroll__button-area {
            &.m--is-right {
                width: $m-defilement-horizontal-automatique--largueur-bouton;
            }
        }
    }

    &.m--has-left-gradient {
        .m-auto-horizontal-scroll__button-area {
            &.m--is-left {
                &::before {
                    content: '';
                }
            }
        }
    }

    &.m--has-right-gradient {
        .m-auto-horizontal-scroll__button-area {
            &.m--is-right {
                &::after {
                    content: '';
                }
            }
        }
    }
}

.m-auto-horizontal-scroll.m--is-gradient-style-white {
    --m-auto-horizontal-scroll--button-background: #{ $m-color-white };
}

.m-auto-horizontal-scroll.m--is-gradient-style-light {
    --m-auto-horizontal-scroll--button-background: #{ $m-color-grey-light };
}

.m-auto-horizontal-scroll.m--is-gradient-style-dark {
    --m-auto-horizontal-scroll--button-background: #{ $m-color-grey-darkest };
}

.m-auto-horizontal-scroll.m--is-gradient-style-interactive {
    --m-auto-horizontal-scroll--button-background: #{ $m-color-interactive };
}

.m-auto-horizontal-scroll.m--is-gradient-style-grey-black {
    --m-auto-horizontal-scroll--button-background: #{ $m-color-grey-black };
}

.m-auto-horizontal-scroll.m--is-gradient-style-interactive-dark {
    --m-auto-horizontal-scroll--button-background: #{ $m-color-interactive-dark };
}

.m-auto-horizontal-scroll.m--is-gradient-style-interactive-darker {
    --m-auto-horizontal-scroll--button-background: #{ $m-color-interactive-darker };
}

.m-auto-horizontal-scroll.m--is-gradient-style-current-color {
    --m-auto-horizontal-scroll--button-background: currentColor;
}

.m-auto-horizontal-scroll.m--has-horizontal-scrollbar {
    overflow: hidden;
}

.m-auto-horizontal-scroll.m--is-drag-active {
    cursor: move;
    cursor: grab;

    &:active,
    &.m--is-dragging {
        cursor: grabbing;
    }
}