import styled from "styled-components";

const IconWrapper = styled.div`
  margin-left: ${(p) => p.theme.spacing.xs};
  opacity: 0;
`;

const KeywordItem = styled.div<{ isSelected: boolean }>`
  position: relative;
  background-color: ${(p) => p.theme.colors.uiBackground02};
  display: flex;
  margin-bottom: ${(p) => p.theme.spacing.xs};
  min-height: ${(p) => p.theme.spacing.l};
  border-radius: ${(p) => p.theme.radii.s};
  cursor: pointer;
  box-shadow: ${(p) => p.theme.shadow.shadowS};
  padding-left: ${(p) => p.theme.spacing.s};
  padding-right: ${(p) => p.theme.spacing.xs};
  align-items: center;
  justify-content: space-between;
  outline: ${(p) => (p.isSelected ? `2px solid ${p.theme.colors.interactive01}` : "none")};

  &:before {
    content: "";
    border-radius: ${(p) => p.theme.radii.s};
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.1s;
  }

  &:hover {
    ${IconWrapper} {
      opacity: 1;
    }
  }

  &:hover:before {
    background-color: ${(p) => p.theme.colors.overlayHoverPrimary};
    opacity: 1;
  }
`;

const KeyName = styled.div`
  ${(p) => p.theme.textStyle.fieldLabel};
  color: ${(p) => p.theme.colors.textHighEmphasis};
`;

const Counter = styled.div<{ isZero: boolean }>`
  ${(p) => p.theme.textStyle.uiXS};
  color: ${(p) => (p.isZero ? p.theme.colors.error : p.theme.colors.textLowEmphasis)};
  font-weight: 600;
  padding-left: ${(p) => p.theme.spacing.xxs};
`;

const ActionsWrapper = styled.div`
  display: flex;
  align-items: center;
`;

export { KeywordItem, KeyName, Counter, ActionsWrapper, IconWrapper };
