import styled from "styled-components";
import { colors } from "@theme/colors";

const Buttons = styled.div<{ row?: boolean }>`
  min-width: 20%;
  max-width: fit-content;
  margin: auto;
  display: flex;
  flex-flow: ${(p) => (p.row ? "row" : "column")} wrap;

  a {
    display: contents;
    text-decoration: none;
  }

  button {
    color: ${colors.blue1};
    background-color: transparent;
    padding: 0.8rem 2rem;
    margin: 0.5rem;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    border: 1px solid ${colors.lightTurquoise};

    &:hover {
      cursor: pointer;
      color: ${colors.white};
    }

    &:active,
    &:focus {
      outline: none;
    }
  }
`;

export default Buttons;
