import styled, { css } from 'styled-components'
import { ILoadMore } from './LoadMore.interface'
import { colors } from '@/styles/variables'

export const StyledLoadMore = styled.div<Partial<ILoadMore>>`
  color: ${props => (props.theme === 'light' ? colors.black : colors.white)};
  display: grid;
  place-items: center;
  min-width: 200px;

  .progress-bar {
    position: relative;
    background-color: ${props =>
    props.theme === 'light' ? colors.gray30 : colors.gray70};
    margin: 20px 0;
    border-radius: 24px;
    width: 100%;
    height: 1px;

    &--fill {
      position: absolute;
      top: 0;
      left: 0;
      background-color: ${props =>
    props.theme === 'light' ? colors.gray90 : colors.white};
      height: 100%;
      transition: width 0.4s ease-out;
      border-radius: inherit;
    }
  }
`

export const StyledProgress = styled.div``