import styled from 'styled-components'
import { media } from 'theme/utils/media.js'
import { Colors } from 'theme/variables'

export const Button = styled.button`
  font-weight: 500;
  letter-spacing: .3em;
  position: relative;
  background-image: linear-gradient(
    transparent,
    transparent calc(1.1em),
    ${Colors.p} 5px,
    ${Colors.p}
  );
  :hover {
    background-image: linear-gradient(
      transparent,
      transparent calc(1.02em),
      ${Colors.p} 4px,
      ${Colors.p}
    );
  }
  ${media.phone`
          background-image: none;
          border-bottom: 1px solid ${Colors.p};
        `} 
  text-transform: uppercase;
  margin-top: 0;
  opacity: .7;
  font-size: 92%;
  ${media.tablet`
    width: 100%;
    text-align: left;
  `};
`

export const PullMoreButton = Button.extend`
  display: ${props =>
    props.number >= props.length ? 'none' : 'block'};
`

@@ -92,16 +92,23 @@
 %7B Colors
+, Fonts
  %7D from 
@@ -159,15 +159,43 @@
 led.
-button%60
+div%60%0A  font-family: $%7BFonts.basic%7D;
 %0A  f
@@ -257,16 +257,35 @@
 lative;%0A
+  cursor: pointer;%0A
   backgr
@@ -575,47 +575,8 @@
 ne%60%0A
-          background-image: none;%0A     
     
@@ -618,19 +618,12 @@
 p%7D;%0A
-      
   %60%7D
- 
 %0A  t
@@ -880,13 +880,14 @@
  : '
-block
+inline
 '%7D;%0A

update button