import styled, { css } from 'styled-components';

import { IScrollingNav } from './ScrollingNav.interface';
import { colors } from '@/styles/variables';

export const StyledScrollingNav = styled.div<IScrollingNav>`
  position: relative;
  display: flex;
  align-items: center;
  max-width: 100%;
  gap: 1rem;
  padding-bottom: 12px;

  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  overflow-y: visible;
  text-align: center;
  white-space: nowrap;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  -ms-overflow-style: auto;
  scrollbar-color: ${colors.primary20} ${colors.gray20};
  scrollbar-width: 3px;

  &::-webkit-scrollbar-thumb {
    background-color: ${colors.primary20};
  }

  &::-webkit-scrollbar-track {
    background-color: ${colors.gray20};
  }

  &::-webkit-scrollbar-corner {
    background-color: ${colors.gray20};
  }

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

  & > div {
    &:first-child {
      margin-left: auto !important;
    }

    &:last-child {
      margin-right: auto !important;
    }
  }

  html,
  body {

  }

  ${(props) => {
    switch (props.align) {
      case "left":
        return css`
          & > div {
            &:first-child {
              margin-left: 0 !important;
            }
          }
        `;
      case "right":
        return css`
          & > div {
            &:last-child {
              margin-right: 0 !important;
            }
          }
        `;
    }
  }}
`;