import { styled } from '../core'
import { stepClassName, tailClassName, tailClassNameLeft, tailClassNameRight, variantColor } from './consts'
import { StepperHorizontalProps } from './stepperHorizontalTypes'

const StepperHorizontalBase = styled.divBox<StepperHorizontalProps>`
  display: flex;
  width: 100%;

  .${stepClassName}:first-of-type .${tailClassName}Left, .${stepClassName}:last-of-type .${tailClassName}Right {
    visibility: hidden;
  }

  .${tailClassNameLeft}, .${tailClassNameRight} {
    width: 50%;
  }
  ${Object.keys(variantColor).map(
    (variant: string) => `.${tailClassNameLeft + variant},
  .${tailClassNameRight + variant},
  .${stepClassName + variant} + .${stepClassName} .${tailClassNameLeft} {
    border-bottom: 1px solid ${variantColor[variant]};
  }`,
  )}
`
export default StepperHorizontalBase
