import styled from 'styled-components';
import {
  rem,
} from '../style/function.style'

export const Container = styled.div<{
  conStyle: {
    marginTop: number;
    marginBottom: number;
  }
}>`
  min-height: ${rem(80)};
  overflow: hidden;
  margin: ${props => `${props.conStyle.marginTop}rem auto ${props.conStyle.marginBottom}rem`};
  width: ${rem(686)};
`

export const InviteContainer = styled.div`
  background: #FFFFFF;
  width: 100%;
  border-radius: ${rem(32)};
  padding: ${rem(36)} 0 ${rem(40)};
  &:nth-child(n+2) {
    margin-top: ${rem(24)};
  }
`

export const Title = styled.div`
  width: 100%;
  font-weight: 500;
  font-size: ${rem(28)};
  line-height: ${rem(40)};
  color: #2E2E2E;
  padding: 0 ${rem(24)};
  display: flex;
  justify-content: space-between;
  align-items: center;
`

export const InviteListContainer = styled.div`
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  min-height: ${rem(100)};
  &:nth-child(n+2) {
    margin-top: ${rem(24)};
  }
  .col-item:nth-child(2n+1) {
    margin-right: ${rem(24)};
  }
  &::after {
    content: '';
    flex: 0 1 ${rem(307)};
  }
`
export const RefreshButton = styled.div`
  display: flex;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  width: ${rem(188)};
  height: ${rem(72)};
  border-radius: ${rem(40)};
  background: rgba(20, 196, 188, 0.1);
  color: #14C4BC;
  font-weight: 500;
  font-size: ${rem(28)};
  line-height: ${rem(40)};
  .icon {
    margin-right: ${rem(12)};
    width: ${rem(32)};
    height: ${rem(32)};
  }
  &:active {
    opacity: 0.5;
  }
`