import styled from 'styled-components/macro';

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

export const StyledItem = styled.div<{ $active: boolean }>`
  background: ${({ $active }) => ($active ? color('sys/color/primary/backdrop/active') : 'transparent')};
  border-radius: 8px;
  color: ${({ $active }) => ($active ? color('sys/color/primary/default') : color('sys/color/text/primary'))};
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  margin: 4px 24px;
  padding: 10px 16px;
`;

export const StyledLinkWrapper = styled.div<{ $active: boolean }>`
  & > a {
    display: flex;
    flex-direction: column;
    text-decoration: none;

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

    &:hover ${StyledItem} {
      background: ${({ $active }) =>
        $active ? color('sys/color/primary/backdrop/active') : color('sys/color/primary/backdrop/hover')};
    }
  }
`;