import styled, { css } from 'styled-components/macro'
import { customScrollbar } from 'features/Common'
import { isMobileDevice } from '../../../../config/userAgent'

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

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

  ${customScrollbar}

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