import styled from "styled-components";

export const StyledOverflow = styled.div`
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; // Momentum scrolling on webkit-touch devices
  scroll-snap-type: x mandatory; // Enables snap scrolling along the x-axis

  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  
  &::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }

  div {
    width: 100%;    
    scroll-snap-align: start; // Aligns the snap point at the start of the scroll container
    flex: 0 0 auto; // Child divs don’t grow or shrink and are based on their content width
  }
`;