import { css } from '@emotion/core';

import { AbsoluteCover, MI_Transition } from 'utils/styles/mixins';
import theme, { buttonRoundedness, colors, durations } from 'utils/theme';
import buttonConfig from 'utils/theme/button-config.json';
import { rhythm } from 'utils/typography';
import styled from '@emotion/styled';

export const ButtonReset = css`
  padding: 0;
  border: none;
  outline: none;
  background: none;
`;

export const ButtonDisabled = css`
  position: relative;
  cursor: not-allowed;
  opacity: 0.4;
  &:before {
    content: '';
    ${AbsoluteCover}
  }
`;

export const ButtonContent = styled.span`
  /* position: relative; */
`;

export const ButtonLoading = styled.span`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
`;

export const Button = css`
  position: relative;
  ${MI_Transition('all', durations.standard)}
  display: block;
  cursor: pointer;
  font-weight: bold;
  font-size: ${theme.fontSizes[1]};
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  padding: ${rhythm(0.4)} ${rhythm(1)};
  transition: all ${durations.standard} ease;
  border-radius: ${buttonRoundedness[buttonConfig.roundedness] || 0};
`;

export const ButtonEnabled = css`
  &:hover {
    filter: brightness(110%);
  }
`;

export const ButtonPrimary = css`
  ${Button}
  outline: none;
  border: none;
  color: ${colors[buttonConfig.idleTextColour] || colors.textLight};
  background-color: ${colors[buttonConfig.idleBackground] || colors.primary};
  border: solid 2px transparent;
`;

export const ButtonSecondary = css`
  ${Button}
  color: ${colors[buttonConfig.hoverBackground] || colors.primaryLight};
  border: solid 2px ${colors[buttonConfig.idleBackground] || colors.primary};
`;