import styled from 'styled-components/macro';

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

export const StyledLinkWrapper = styled.span`
  display: inline-block;
  margin: 28px auto 4px;

  & > a {
    border-radius: 12px;
    display: inline-block;
    padding: 4px;

    &:hover {
      background: ${color('sys/color/primary/backdrop/hover')};
    }

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

export const StyledImage = styled.img`
  height: 38px;
  object-fit: cover;
  width: 38px;
`;

export const StyledImageWrapper = styled.div`
  border-radius: 8px;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);
  height: 38px;
  overflow: hidden;
  width: 38px;
`;