@import "shared/mixins-and-vars";

.can-horizontally-scroll {
    @fade-color: rgba(0, 0, 0, 0.5);
    @code-focus-outline-width: 4px;

    @media @mobile {
        &__parent {
            position: relative;

            &::after {
                content: "";
                display: block;
                position: absolute;
                z-index: 0;
                pointer-events: none;
                top: 0;
                left: 0;
                background-image: linear-gradient(
                    -270deg,
                    rgba(0, 0, 0, 0),
                    rgba(0, 0, 0, 0) 80%,
                    @fade-color
                );
                width: 100%;
                height: 100%;
            }

            &:focus-within::after {
                top: @code-focus-outline-width;
                left: @code-focus-outline-width;
                width: calc(100% - 2 * @code-focus-outline-width);
                height: calc(100% - 2 * @code-focus-outline-width);
            }

            &.fade-both::after {
                background-image: linear-gradient(
                    -270deg,
                    @fade-color,
                    rgba(0, 0, 0, 0) 20%,
                    rgba(0, 0, 0, 0) 80%,
                    @fade-color
                );
            }

            &.fade-left::after {
                background-image: linear-gradient(
                    -270deg,
                    @fade-color,
                    rgba(0, 0, 0, 0) 20%,
                    rgba(0, 0, 0, 0)
                );
            }
        }
    }
}