import styled from 'styled-components/macro';

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

export const StyledLinkWrapper = styled.div`
  & > a {
    display: flex;

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

export const StyledItem = styled.div<{ $hover: boolean; $active: boolean }>`
  width: 40px;
  height: 40px;
  margin: 8px auto;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: ${({ $hover, $active }) => {
    if ($active) {
      return color('sys/color/primary/backdrop/active');
    }
    if ($hover) {
      return color('sys/color/primary/backdrop/hover');
    } else {
      return 'transparent';
    }
  }};
`;