import styled from "styled-components";

const TreeWrapper = styled.div`
  ul:not(:first-child) {
    padding-left: ${(p) => p.theme.spacing.s};
  }
`;

const NewIconWrapper = styled.div`
  width: 16px;
  height: 16px;
  margin-left: auto;
`;

const Item = styled.div<{ selected: boolean }>`
  display: flex;
  width: 100%;
  margin-bottom: ${(p) => p.theme.spacing.xxs};
  align-items: center;
  cursor: pointer;
  padding: ${(p) => `${p.theme.spacing.xxs} ${p.theme.spacing.xs}`};
  border-radius: ${(p) => p.theme.radii.s};
  background-color: ${(p) => (p.selected ? p.theme.color.overlayPressedPrimary : "transparent")};
  height: 32px;
  overflow: hidden;
  flex-shrink: 0;
  &:hover {
    background-color: ${(p) => (p.selected ? p.theme.color.overlayPressedPrimary : p.theme.color.overlayHoverPrimary)};
  }
  ${NewIconWrapper} {
    opacity: ${(p) => (p.selected ? "1" : "0")};
  }
`;

const RootName = styled.div`
  ${(p) => p.theme.textStyle.uiM};
  color: ${(p) => p.theme.color.textHighEmphasis};
  white-space: nowrap;
`;

const Title = styled.div`
  ${(p) => p.theme.textStyle.uiM};
  color: ${(p) => p.theme.color.textMediumEmphasis};
  margin-top: ${(p) => p.theme.spacing.xs};
  margin-bottom: ${(p) => p.theme.spacing.xs};
`;

export { TreeWrapper, Item, RootName, Title, NewIconWrapper };
