import styled from 'styled-components/macro';

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

export const StyledLinkWrapper = styled.span`
  display: inline-block;
  margin: 24px 24px 0 24px;

  & > a {
    align-items: center;
    border-radius: 12px;
    color: ${color('sys/color/primary/default')};
    display: flex;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    text-decoration: none;

    &: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;
`;