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

type RewindProps = {
  isActive?: boolean,
  isBackward?: boolean,
  isForward?: boolean,
}

export const Background = styled.div<RewindProps>`
  width: 920px;
  height: 920px;
  border-radius: 50%;
  background-color: ${({ isActive }) => (isActive ? 'rgba(0, 0, 0, 0.4)' : 'rgba(0, 0, 0, 0)')};
  position: absolute;
  ${({ isBackward }) => isBackward && css`right: 60%;`}
  ${({ isForward }) => isForward && css`left: 60%;`}
  transition: all 0.3s ease-in-out;
`

export const Time = styled.div<RewindProps>`
  position: absolute;
  color: #FFFFFF;
  top: 50%;
  font-size: 20px;
  transform: translate(0, -50%);
  display: flex;
  align-items: center;
  user-select: none;

  ${({ isBackward }) => isBackward && css`right: 2%;`}
  ${({ isForward }) => isForward && css`left: 2%;`}

  > :first-child {
    margin-right: 10px;
  }
`

export const RewindIcon = styled.img`
  width: 43px;
  height: 28px;
`
