From 358ae543b008806841ff3ce4492cb332cbdc719a Mon Sep 17 00:00:00 2001
From: Dan Head <me@danielhead.com>
Date: Tue, 2 Feb 2021 23:40:59 +0000
Subject: [PATCH] feat(button): focus state

---
 src/components/button.js | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/button.js b/src/components/button.js
index e7756a2..9c9202b 100644
--- a/src/components/button.js
+++ b/src/components/button.js
@@ -1,12 +1,27 @@
 import React from "react";
 import styled from "@emotion/styled";
+import { css } from "@emotion/react";
 
 const Container = styled.button`
   background-color: transparent;
   margin: 0;
   padding: 4px 8px;
-  border: 1px solid var(--color-black);
-  border-radius: 4px;
+  border: 1px solid var(--color-dark);
+  font-size: var(--font-size-md);
+  ${props =>
+    props.float &&
+    css`
+      float: ${props.float};
+    `}
+
+  &:focus {
+    outline: 0;
+    box-shadow: 0 0 0 2px var(--color-dark);
+  }
+
+  &:focus:not(:focus-visible) {
+    box-shadow: none;
+  }
 `;
 
 export default function Button({ children, ...other }) {