import styled, {css} from 'styled-components';

import {
  spacing,
  black,
} from '@propellerads/stylevariables';

const Presets = styled.div`
  display: flex;
  flex-direction: ${(props) => (props.isMobile || props.isOnTop ? 'row' : 'column')};
  width: ${(props) => (props.isMobile || props.isOnTop ? '100%' : '86px')};
  margin-left: ${spacing * 4}px;
  padding-top: ${spacing * 4}px;
  flex-wrap: wrap;
`;

const PresetItem = styled.div`
  margin-bottom: ${spacing * 4}px;
  width: 86px;
  
  .Button {
    width: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    display: inline;
  }
  
  ${(props) => props.isSelected && css`
    .Button {
      color: ${black};
    }
`}
`;

export {Presets, PresetItem};