import styled from 'styled-components' ; import { Button } from './Button' ; export const LinkButton = styled ( Button ) < { textDecoration ? : string ; } > `
  ${ ( { theme } ) => theme . fonts . bodyStyle }
  color: ${ ( { theme } ) => theme . colors . tertiary };
  padding: 0;
  height: auto;
  text-decoration-line: ${ ( { textDecoration } ) => textDecoration ? textDecoration : 'underline' };
  & div {
    padding: 0;
  }
  &:focus {
    outline: none;
    background: ${ ( { theme } ) => theme . colors . focus };
    color: ${ ( { theme } ) => theme . colors . copy };
  }
  &:not([data-focus-visible-added]) {
    background: transparent;
    outline: none;
    color: ${ ( { theme } ) => theme . colors . tertiary };
  }

  &:active {
    outline: 0;
    opacity: 1.0 !important;
    background-color: ${ ( { theme } ) => theme . colors . focus };
    color: ${ ( { theme } ) => theme . colors . copy };
  }

  &:hover {
    opacity: 0.8;
  }

  &:disabled {
    color: ${ ( { theme } ) => theme . colors . disabled };
    background-color: transparent;
  }
` ;