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

export const Container  = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 ${rem(32)};
  box-sizing: border-box;
`;

export const Title = styled.h5`
  flex: 1 1 auto;
  height: ${rem(100)};
  font-size: ${rem(30)};
  line-height: ${rem(100)};
  color: #2e2e2e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  .nw-dark-mode &{
    color: #ccc!important;
  }
`;

export const MoreLinkBox = styled.a`
  flex: 0 0 auto;
  font-size: ${rem(30)};
  color: #ccc;
  .nw-dark-mode &{
    color: #666;
  }
`;

export const MoreTitle = styled.span`
  display: inline-block;
  vertical-align: middle;
  font-size: ${rem(26)};  
`;

export const MoreIconSvg = styled.svg`
  font-size: ${rem(24)};
  vertical-align: middle;
`;