import styled, { keyframes } from 'styled-components'


const MIN_LIST_SIZE = 300
const MIN_DETAIL_SIZE = 400

export const ListPane = styled.div`
  display: flex;
  flex-direction: column;
  min-height: 0;
`

export const DetailPane = styled.div`
  border-left: 2px solid #d5d5d5;
  padding: 8px;
`

export const EventExplorerContainer = styled.div`
  min-height: 0;
  flex: 1;

  @media (min-width: ${MIN_LIST_SIZE + MIN_DETAIL_SIZE}px) {
    display: grid;
    grid-template-columns:
      minmax(${MIN_LIST_SIZE}px, 400px)
      minmax(${MIN_DETAIL_SIZE}px, 1fr);
  }
`

export const PlaceholderMsg = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
`

const fadeIn = keyframes`
  0% {
    opacity: 0;
    transform: translateY(1px);
  }

  100% {
    opacity: 1;
    transform: none;
  }
`

export const NoMatchingEventsMsg = styled.div`
  margin: auto;
  margin-top: 26px;
  animation: ${fadeIn} 0.4s ease-in-out;
`
