import {
  accentLav,
  black,
  blue300,
  blue500,
  dark,
  darkLine,
  gray400,
  gray600,
  gray700,
  gray900,
  lavender,
  lighterBlue,
  standardGrey,
} from '@/styles/colors';
import styled from '@emotion/styled';

export const BaseButton = styled.button<{ disabled?: boolean }>`
  border: 1px solid transparent;
  border-radius: 2px;
  background: none;
  font-family: inherit;
  line-height: inherit;
  font-size: 1.4rem;
  padding: 10px 20px;
  color: ${blue500};
  display: flex;
  align-items: center;
  justify-content: center;
  &:hover:not(:disabled) {
    color: ${blue300};
    cursor: pointer;
  }
  :disabled:hover {
    cursor: default;
  }
  :disabled {
    opacity: 0.5;
  }
  &:active,
  &:focus {
    outline: none;
    border: 1px solid white;
  }
  svg:not(.no-fill-override) * {
    fill: currentColor;
  }
`;

export const ClearButton = styled(BaseButton)`
  padding: 10px 0;
  color: ${gray700};
  &:hover:not(:disabled) {
    color: white;
  }
`;

export const SuperMinorButton = styled(BaseButton)`
  color: ${gray600};
  border: 1px solid ${gray400};
  background-color: inherit;
  &:hover:not(:disabled) {
    color: ${gray900};
    box-shadow: 0 0 0 1px white;
  }
`;

export const MinorButton = styled(BaseButton)`
  color: white;
  border: 1px solid ${blue500};
  background-color: inherit;
  &:hover:not(:disabled) {
    color: ${gray900};
    box-shadow: 0 0 0 1px white;
  }
`;

export const MajorButton = styled(BaseButton)`
  border: 1px solid transparent;
  color: white;
  background-color: ${blue500};
  font-weight: 500;
  &:hover:not(:disabled) {
    color: white;
    background-color: ${blue300};
  }
`;

export const SquareButton = styled(BaseButton)`
  border-radius: none;
  border: 1px solid transparent;
  color: ${blue500};
  &:hover:not(:disabled) {
    color: white;
    background-color: ${blue300};
  }
`;

export const CornerButton = styled(MajorButton)`
  border: none;
  &:active {
    border: none;
  }
  &:focus {
    opacity: 0.7;
    border: none;
    outline: none;
  }
  border-top-right-radius: 0;
  background-color: ${gray400};
  padding: 8px 0 8px 14px;
  position: relative;
  &:hover:not(:disabled) {
    background-color: ${gray700};
    &:after {
      border-top-color: ${gray700};
    }
  }
  &:before {
    content: '';
    position: absolute;
    left: 100%;
    bottom: 2.4rem;
    top: 0px;
    display: block;
    width: 2.4rem;
    background-color: inherit;
    border-top-right-radius: inherit;
  }
  &:after {
    content: '';
    position: absolute;
    left: 100%;
    bottom: 0px;
    display: block;
    height: 2.4rem;
    width: 2.4rem;
    border-right: 2.4rem solid transparent;
    border-top: 2.4rem solid ${gray400};
  }
`;

export const MainButton = styled.button<{ bgColor?: string; color?: string }>`
  font-family: Architekt;
  font-size: 12px;
  border: none;
  border-radius: 0;
  background-color: ${(props) => props.bgColor || lighterBlue};
  color: ${(props) => props.color || 'inherit'};
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 800;
  cursor: pointer;
  @media screen and (max-width: 1259px) {
    justify-content: center;
  }

  &:disabled {
    background-color: ${gray700};
    color: ${gray400};
    cursor: default;
    opacity: 0.5;
  }
`;

export const StandardButton = styled.button`
  font-family: 'Architekt';
  font-size: 16px;
  line-height: inherit;
  text-transform: uppercase;
  background: ${lavender};
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 10px 15px;
  color: ${black};
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;

  &:hover:not(:disabled) {
    color: ${standardGrey};
    background: ${accentLav};
    cursor: pointer;
  }

  :disabled {
    opacity: 0.3;
    color: ${darkLine};
    background: ${standardGrey};
  }
  :disabled:hover {
    cursor: default;
  }

  &:active,
  &:focus {
    outline: none;
    border: 1px solid white;
  }
  svg:not(.no-fill-override) * {
    fill: currentColor;
  }
`;

export const LandingButton = styled(MainButton)`
  padding: 0;
  height: 100%;
  width: 12rem;

  @media screen and (max-width: 600px) {
    display: none;
  }
`;

export const MobileCTAButton = styled(MainButton)`
  display: none;
  height: 100%;
  width: 12rem;

  @media screen and (max-width: 600px) {
    display: block;
  }
`;

export const YouTubeButton = styled(LandingButton)`
  background-color: transparent;
  border: 2px solid #f00;
  &:hover:not(:disabled) {
    background-color: #f00;
  }
`;

export const BracketButton = styled.button<{ disabled?: boolean }>`
  font-family: Architekt;
  line-height: inherit;
  text-transform: uppercase;
  background: transparent;
  border: none;
  padding: 10px 20px 12px 20px;
  color: ${dark};
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: color 0.2s;

  &:before,
  &:after {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 14px;
    bottom: 14px;
    padding-bottom: 2px;
    line-height: 9px;
    opacity: 0.5;
  }

  &:before {
    text-align: left;
    content: '[';
  }

  &:after {
    text-align: right;
    content: ']';
  }

  &:hover:not(:disabled) {
    cursor: pointer;
    &::before,
    &::after {
      opacity: 1;
    }
  }

  :disabled {
    opacity: 0.3;
  }
  :disabled:hover {
    cursor: default;
  }

  &:active,
  &:focus {
    outline: none;
    &:before {
      background-color: rgba(255, 255, 255, 0.1);
    }
    &:before,
    &:after {
      text-decoration: none;
      opacity: 1;
    }
  }
  svg:not(.no-fill-override) * {
    fill: currentColor;
  }
`;