import styled from 'styled-components/macro';

import { Icon } from '../../../../../components/Icon/Icon';
import { color, radius, shadow } from '../../../../../theme';

export const StyledItem = styled.li`
  align-items: center;
  background-color: ${color('ref/palette/gray/100')};
  border-radius: ${radius('sys/radius/form-item')};
  box-sizing: border-box;
  color: ${color('ref/palette/gray/600')};
  display: flex;
  font-size: 14px;
  font-weight: 600;
  gap: 4px;
  height: 24px;
  line-height: 24px;
  margin: 0;
  max-width: 100%;
  padding-left: 6px;
  width: fit-content;
`;

export const StyledRemoveButton = styled.div`
  align-items: center;
  appearance: none;
  border-radius: 0 ${radius('sys/radius/form-item')} ${radius('sys/radius/form-item')} 0;
  border-style: none;
  cursor: pointer;
  display: flex;
  height: 24px;
  justify-content: center;
  min-width: 24px;
  outline: none;
  width: 24px;

  &:hover {
    background-color: ${color('ref/palette/gray/200')};
  }

  &:focus-visible {
    box-shadow: ${shadow('sys/shadow/focus')};
  }
`;

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