@import '~@frsource/frs-hide-scrollbar';

/**
 * To be changed together with `className` core variable
 * More info: https://www.frsource.org/tiny-carousel/api-reference/core/#config
 */
$frs-tc-class-name: 'frs-tc' !default;
/**
 * To be changed together with `classNameOverflow` core variable
 * More info: https://www.frsource.org/tiny-carousel/api-reference/core/#config
 */
$frs-tc-class-name-overflow: 'frs-tc--o' !default;
/**
 * To be changed together with `itemClassName` core variable
 * More info: https://www.frsource.org/tiny-carousel/api-reference/core/#config
 */
$frs-tc-item-class-name: 'frs-tc-item' !default;

.#{$frs-tc-class-name} {
  display: flex;
  height: 100%;
  overflow: scroll;

  -webkit-overflow-scrolling: touch;

  scroll-behavior: smooth;
  scroll-snap-destination: 0% 100%;
  scroll-snap-points-x: repeat(100%);
  scroll-snap-type: mandatory;
  width: 100%;

  @media (prefers-reduced-motion: reduce) {
    scroll-behavior: auto;
  }

  @supports (scroll-snap-align: start) {
    /* modern scroll snap points */
    scroll-snap-type: x mandatory;
  }
}

.#{$frs-tc-class-name-overflow} {
  &::before,
  &::after {
    content: '';
  }
}

.#{$frs-tc-class-name-overflow}::before,
.#{$frs-tc-class-name-overflow}::after,
.#{$frs-tc-item-class-name} {
  flex: 0 0 100%;
  overflow: hidden;
  scroll-snap-align: start;
  width: 100%;

  @supports (scroll-snap-align: start) {
    /* modern scroll snap points */
    scroll-snap-align: center;
  }
}