import styled, { css } from 'styled-components/macro'

import { isMobileDevice } from 'config/userAgent'

export const ScLogo = styled.img`
  width: 24px;
  object-fit: cover;
  margin-right: 10px;

  ${isMobileDevice
    ? css`
            width: 15px;
          `
    : ''};
`

export const ScName = styled.span<{active?: boolean}>`
  font-weight: 400;
  font-size: 17px;
  line-height: 21px;

  ${({ active }) => (active
    ? css`
            font-weight: 700;
            font-size: 17px;
            line-height: 21px;
      `
    : '')};

  ${isMobileDevice
    ? css`
            font-size: 12px;
            line-height: 15px
      `
    : ''};
`

export const ScWrapper = styled.div`
  display: flex;
  align-items: center;
  padding: 5px 10px;
  max-width: 300px;

  :hover {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    cursor: pointer;

    ${isMobileDevice
    ? css`
            font-size: 12px;
            line-height: 15px
      `
    : ''};
}
`
