src/components/Button/index.styled.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

import styled from "styled-components";
import { theme } from "../../constants";

export const Button = styled.button<{ variant?: keyof typeof theme }>`
  background-color: transparent;
  border: 1px solid ${({ theme, variant }) =>
    variant ? theme[variant] : theme.border};
  color: ${({ theme, variant }) =>
    variant ? theme[variant] : theme.text};

  font-family: "Roboto Mono", monospace;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;

  padding: 10px 20px;
  width: max-content;
  cursor: pointer;
  transition: background-color 0.1s, color 0.1s;

  &:hover {
    background-color: ${({ theme, variant }) =>
      variant ? theme[variant] : theme.border};
    color: var(--cl-gray-0);
  }
`;