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

const CommonTable = styled.div`
  text-align: center;
  overflow: hidden;
  position: relative;
  span {
    display: inline-block;
  }
`;

const Header = styled.div`
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
`;

const Row = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  &:hover {
    filter: brightness(120%);
  }
`;

const RowAni = styled.div``;
interface RowSpanProps {
  overRoll: boolean;
}

const RowSpan = styled.p<RowSpanProps>`
  ${props =>
    props.overRoll &&
    css`
      animation: var(--time) wordsLoop linear infinite normal;
    `}
  height: 100%;
  word-break: keep-all;
  width: fit-content;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: var(--textAlign);
  justify-content: center;
  @keyframes wordsLoop {
    0% {
      transform: translateX(0px);
      -webkit-transform: translateX(0px);
    }
    10% {
      transform: translateX(0px);
      -webkit-transform: translateX(0px);
    }

    90%,
    100% {
      transform: translateX(calc(-100% + var(--width)));
      -webkit-transform: translateX(calc(-100% + var(--width)));
    }
  }
`;

const styleBase = {
  width: '100%',
};

export { CommonTable, Header, Row, RowAni, RowSpan, styleBase };