import styled from 'styled-components/macro';

import { color } from '../../theme';
import { Button } from '../Button/Button';
import { Icon } from '../Icon/Icon';

export const TunedButton = styled(Button)`
  color: ${color('sys/color/text/secondary')};
  height: 28px;
  margin-right: 4px;
  padding: 0;
  width: 28px;

  &:disabled {
    background-color: transparent;
    border-color: transparent;
    color: ${color('sys/color/text/disabled')};
    cursor: not-allowed;
  }

  &:hover:not(:disabled) {
    background-color: transparent;
    border-color: transparent;
  }
`;

export const TunedIcon = styled(Icon)`
  height: 18px;
  width: 18px;
`;