text: import styled from '@emotion/styled';
  import React from 'react';
  import Icon from '../icon';
  import { flexCenter } from './../_shared/styled-mixins';
  
  export const StyledButtonLink = styled.a`
    ${flexCenter};
    text-decoration: none;
    color: var(--primary-color) !important;
    background-color: var(--bg-content-color);
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    position: relative;
    border: none;
    padding: 0.4rem 0.8rem;
  
    &:hover {
      color: var(--secondary-color) !important;
    }
  
    &:after {
      content: '';
      z-index: -1;
      border: 1px solid var(--primary-color);
      position: absolute;
      bottom: -3px;
      right: -3px;
      width: 100%;
      height: 100%;
      transition: all ease var(--transition-fast);
    }
  
    &:hover:after {
      border: 1px solid var(--secondary-color);
      bottom: -5px;
      right: -5px;
    }
  
    & > svg {
      fill: var(--bg-content-color);
      height: 0.8rem;
      margin-left: 0.25rem;
    }
  
    &:hover > svg {
      fill: var(--primary-color);
    }
  `;
  
  const ButtonLink = ({ label, link }) => {
    return (
      <React.Fragment>
        {label && link && (
          <StyledButtonLink href={link ? link : '#'} rel="noopener">
            {label}
            <Icon icon="arrow-right" />
          </StyledButtonLink>
        )}
      </React.Fragment>
    );
  };
  
  export default ButtonLink;
  