import styled from 'styled-components';
export const Wrapper = styled.div``;
export const ButtonsRow = styled.div`
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
`;
export const ButtonWrapper = styled.div`
  width: max-content;
  margin: 8px auto;
  padding: 8px 12px;
  border-radius: 3px;
  cursor: pointer;

  font-weight: ${props => props.selected ? 600 : 400};
  box-shadow: ${props => props.selected ? '#4267b2 0 0 5px;' : ''};
  ${props => props.selected ? `#4267b2;` : 'rgba(0, 0, 0, 0)'};
  ${props => props.selected && '#4267b2 0 0 5px;'}
  ${props => props.selected && `color: grey;`};

  transition: all 0.3s;

  &:hover {
    font-weight: 600;
    ${props => !props.selected && `-webkit-transform: scale(.9);`}
    ${props => !props.selected && `transform: scale(.9);`}
  }

  & > div:nth-child(1) {
    ${props => props.selected ? `height: 54px;` : `height: 70px;`}
    ${props => props.selected ? `height: 54px;` : `width: 70px;`}
    border-radius: 2px;

    img {
      ${props => props.selected ? `height: 54px;` : `height: 100%`}
      ${props => props.selected ? `width: 54px;` : `width: 100%;`}
      ${props => props.selected ? `transform: scale(1)` : ``}
      object-fit: contain;
    }
  }

  & > div:nth-child(2) {
    width: 100px;
    text-align: center;
    padding-top: 8px;
    font-size: 13px;
  }
`;