jobiqo-cl/lib/es/src/components/02-atoms/01-forms/01-button/styles.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

import { darken as curriedDarken } from '../../../../../node_modules/polished/dist/polished.es.js';
import styled from 'styled-components';
import { color } from '../../../../../node_modules/@styled-system/color/dist/index.esm.js';
import { borderStyle, borderWidth, borderRadius, borderColor } from '../../../../../node_modules/styled-system/dist/index.esm.js';

const Button = styled.button `
	position: relative;
	font-size: ${props => props.theme.button.fontSize};
	text-transform: ${props => props.theme.button.textTransform};
	letter-spacing: ${props => props.theme.button.letterSpacing};
	padding: ${props => props.theme.button.padding};
	height: ${props => props.theme.button.height};
	border-radius: ${props => props.theme.button.borderRadius};
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;

	${props => (props.iconed ? `padding: ${props.theme.button.paddingIconed};` : ``)}

	${props => props.fab
    ? `
	border-radius:50%;
	width: ${props.theme.button.height};`
    : ``}

	${props => props.buttonStyle && props.raised
    ? `
          color: ${props.theme.button.color[props.buttonStyle]};
          background: ${props.theme.button.backgroundColor[props.buttonStyle]};
          border-width: ${props.theme.button.borderWidth};
          border-style: ${props.theme.button.borderStyle};
          border-color: ${props.theme.button.borderColor[props.buttonStyle]};
          &:focus,
          &:active {
            background: ${curriedDarken(0.1, props.theme.button.backgroundColor[props.buttonStyle])};
          }`
    : ``};

	${props => props.buttonStyle && !props.raised
    ? `
          color: ${props.theme.button.backgroundColor[props.buttonStyle]};
          background: transparent;
          border-width: ${props.theme.button.borderWidth};
          border-style: ${props.theme.button.borderStyle};
          border-color: transparent;
          &:focus,
          &:active {
            background: ${props.theme.button.soft.backgroundColor[props.buttonStyle]};
            outline: none;
            border-color: ${props.theme.button.soft.backgroundColor[props.buttonStyle]};
          }
          `
    : ``};

	${props => props.buttonStyle && props.bordered
    ? `
          color: ${props.theme.button.backgroundColor[props.buttonStyle]};
          background: ${props.theme.button.soft.backgroundColor[props.buttonStyle]};
          border-width: ${props.theme.button.borderWidth};
          border-style: ${props.theme.button.borderStyle};
          border-color: ${props.theme.button.backgroundColor[props.buttonStyle]};
          &:focus,
          &:active {
            background: ${props.theme.button.soft.backgroundColor[props.buttonStyle]};
            outline: none;
            border-color: ${props.theme.button.soft.backgroundColor[props.buttonStyle]};
          }
          `
    : ``};

	${props => (!props.buttonStyle && props.color ? [color, borderStyle, borderWidth, borderRadius, borderColor] : ``)};

	svg:last-child:not(:only-child) {
		margin-left: 1rem;
	}

	svg:first-child:not(:only-child) {
		margin-right: 1rem;
	}

	${props => (props.block ? 'width: 100%;' : '')}

	&:disabled {
		opacity: ${props => props.theme.button.hoverOpacity};
	}
`;

export { Button };