elements.tsx

import styled from '../../styled-components'

export const Wrapper = styled.div`
  display: flex;
  background-color: ${({ theme }) => theme.color.dark};
  height: 50px;
`

export const Port = styled<
  {
    isSelected: boolean
  },
  'button'
>('button')`
  outline: none;
  border: 0;
  height: 100%;
  background-color: ${({ theme, isSelected }) =>
    isSelected
      ? theme.color.lighten(theme.color.dark, 0.4)
      : theme.color.lighten(theme.color.dark, 0.2)};
  display: flex;
  align-items: center;
  color: ${({ theme }) => theme.color.white};
  padding: ${({ theme }) => `${theme.padding.small} ${theme.padding.normal}`};
`

export const AddPort = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  color: ${({ theme }) => theme.color.primary};
  cursor: pointer;
  :hover {
    color: ${({ theme }) => theme.color.lighten(theme.color.primary, 0.3)};
  }
`