import styled, { css } from "styled-components"

const RootButton = styled.button.attrs({
  className: "heavent Button"
})`
  white-space: pre;
  font-weight: normal;
  cursor: pointer;
  min-width: 100px;
  color: ${(props) => props.theme.pumpkin};
  text-decoration: none;
  font-size: 1rem;
  padding: 0.2rem 0rem;
  &:focus {
    outline: none;
  }
  &:hover {
    opacity: 0.8;
  }
  &:disabled {
    opacity: 0.5;
  }
  &:disabled:hover {
    cursor: default;
  }
`

const ButtonStyle = css`
  border-radius: 5px;
  font-size: 1rem;
  min-width: 100px;
  font-weight: 700;
  padding: 7px 12px;
  &:disabled {
    background: ${(props) => props.theme.borderGrey};
    border-color: ${(props) => props.theme.borderGrey};
  }
  @media screen and (max-width: 480px) {
    font-size: 0.9rem;
  }
`

export const Secondary = styled(RootButton).attrs({
  className: "SecondaryButton"
})`
  ${ButtonStyle}
  color: ${(props) => props.theme.matteBlack};
  background: ${(props) => props.theme.borderGrey};
  border: 2px solid ${(props) => props.theme.borderGrey};
`
export const Primary = styled(RootButton).attrs({
  className: "PrimaryButton"
})`
  ${ButtonStyle}
  color: ${(props) => props.theme.white};
  background: ${(props) => props.theme.pumpkin};
  border: 2px solid ${(props) => props.theme.pumpkin};

`

export const Border = styled(RootButton).attrs({
  className: "BorderButton"
})`
  font-weight: bold;
  border-radius: 5px;
  font-size: 1rem;
  padding: 7px 12px;
  background-color: white;
  &:hover {
    opacity: 0.9;
  }
  @media screen and (max-width: 480px) {
    font-size: 0.9rem;
  }
  border: 1px solid ${(props) => props.theme.pumpkin || "inherit"};
  color: ${(props) => props.theme.pumpkin || "inherit"};
`