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

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

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

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

  ${customScrollbar}

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