import styled, { css } from 'styled-components/macro'

import { ArrowLoaderProps } from './types'

export const Wrapper = styled.div<ArrowLoaderProps>`
  border-color: transparent;
  width: ${({ width = 'auto' }) => width};
  ${({ color, theme: { colors } }) => (
    css`
      color: ${color || colors.loader};
    `
  )}
  height: 100%;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  :disabled {
    opacity: 0.5;
  }
`
