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

import { customScrollbar } from 'features/Common'
import { T9n } from 'features/T9n'

import { isMobileDevice } from '../../../../config/userAgent'

type MatchesWrapperProps = {
  additionalScrollHeight: number,
  hasScroll?: boolean,
}

export const MatchesWrapper = styled.div<MatchesWrapperProps>`
  overflow-y: auto;
  max-height: calc(100vh - 200px - ${({ additionalScrollHeight }) => additionalScrollHeight}px);
  padding-right: ${({ hasScroll }) => (hasScroll ? '10px' : '')};

  > * {
    :not(:last-child) {
      margin-bottom: 10px;
    }  
  }

  ${customScrollbar}

  ${isMobileDevice ? css`
    overflow: hidden;
    max-height: initial;
    ` : ''}
`

export const Title = styled(T9n)`
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
`
