<commit_before>import * as React from 'react';
import styled, { StyledFunction, withTheme } from 'styled-components';
import hoc from '../hoc';
import { bold, darken, getColor, getColoringType, px } from '../utils';

interface ButtonProps extends DefaultProps, Coloring, Sizing {
	square?: boolean;
	disabled?: boolean;
	outline?: boolean;
	underline?: boolean;
}

const squareWidth = (val: number): number => val / 9 * 10;

const minWidth = (props: ButtonProps) => {
	if (props.w == null && !props.square) {
		return 'auto';
	}
	if (props.square) {
		return props.emphasized
			? squareWidth(props.theme.space[5])
			: squareWidth(props.theme.space[4]);
	}

	return props.w;
};

const horizontalPadding = (props: ButtonProps) => {
	if (props.w == null && !props.square) {
		return props.emphasized ? 50 : 20;
	}
	if (props.square || props.w) {
		return 0;
	}

	return props.emphasized ? 50 : 20;
};

const styleableButton: StyledFunction<ButtonProps> = styled.button;

const Button = styleableButton`
	padding-top: 1px;
	padding-left: ${props => px(horizontalPadding(props))};
	padding-right: ${props => px(horizontalPadding(props))};
	font-family: inherit;
	display: inline-block;
	font-weight: ${props => bold(props)};
	border-radius: ${props => px(props.theme.radius)};
	appearance: none;
	text-decoration: none;
	border: 0;
	margin: 0;
	min-width: ${props => px(minWidth(props))};
	vertical-align: middle;
	font-size: inherit;
	line-height: 1.1;
	text-align: center;
	cursor: pointer;
	background: ${props => props.bg || getColor(props, 'bg', 'main')};
	color: ${props => props.color || '#fff'};
	height: ${(props: ButtonProps) =>
		px(props.emphasized ? props.theme.space[5] : props.theme.space[4])};

	&:hover,
	&:focus,
	&:active {
		color: #fff;
		background-color: ${props =>
			getColor(props, 'bg', 'dark') || darken(props.color as string)};
	}

	&:disabled {
		opacity: 0.65;
		cursor: not-allowed;
	}
`;

const Outline = Button.extend`
	color: ${props =>
		getColor(props, 'color', 'main') || props.theme.colors.text.main};
	background: ${props => props.color || 'none'};
	border: 1px solid;
`;

const Underline = Outline.extend`
	border: 0;
	border-radius: 0;
	border-bottom: 1px solid;

	&:hover,
	&:focus,
	&:active {
		background: none;
		color: ${props =>
			getColor(props, 'color', 'main') || props.theme.colors.text.main};
		box-shadow: 0px -1px 0 0px inset;
	}<commit_msg>Fixes underline buttons<commit_after>import * as React from 'react';
import styled, { StyledFunction, withTheme } from 'styled-components';
import hoc from '../hoc';
import { bold, darken, getColor, getColoringType, px } from '../utils';

interface ButtonProps extends DefaultProps, Coloring, Sizing {
	square?: boolean;
	disabled?: boolean;
	outline?: boolean;
	underline?: boolean;
}

const squareWidth = (val: number): number => val / 9 * 10;

const minWidth = (props: ButtonProps) => {
	if (props.w == null && !props.square) {
		return 'auto';
	}
	if (props.square) {
		return props.emphasized
			? squareWidth(props.theme.space[5])
			: squareWidth(props.theme.space[4]);
	}

	return props.w;
};

const horizontalPadding = (props: ButtonProps) => {
	if (props.w == null && !props.square) {
		return props.emphasized ? 50 : 20;
	}
	if (props.square || props.w) {
		return 0;
	}

	return props.emphasized ? 50 : 20;
};

const styleableButton: StyledFunction<ButtonProps> = styled.button;

const Button = styleableButton`
	padding-top: 1px;
	padding-left: ${props => px(horizontalPadding(props))};
	padding-right: ${props => px(horizontalPadding(props))};
	font-family: inherit;
	display: inline-block;
	font-weight: ${props => bold(props)};
	border-radius: ${props => px(props.theme.radius)};
	appearance: none;
	text-decoration: none;
	border: 0;
	margin: 0;
	min-width: ${props => px(minWidth(props))};
	vertical-align: middle;
	font-size: inherit;
	line-height: 1.1;
	text-align: center;
	cursor: pointer;
	background: ${props => props.bg || getColor(props, 'bg', 'main')};
	color: ${props => props.color || '#fff'};
	height: ${(props: ButtonProps) =>
		px(props.emphasized ? props.theme.space[5] : props.theme.space[4])};

	&:hover,
	&:focus,
	&:active {
		color: #fff;
		background-color: ${props =>
			getColor(props, 'bg', 'dark') || darken(props.color as string)};
	}

	&:disabled {
		opacity: 0.65;
		cursor: not-allowed;
	}
`;

const Outline = Button.extend`
	color: ${props =>
		getColor(props, 'color', 'main') || props.theme.colors.text.main};
	background: ${props => props.color || 'none'};
	border: 1px solid;
`;

const Underline = Outline.extend`
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 2px;
	height: auto;
	border: 0;
	border-radius: 0;
	border-bottom: 1px solid;

	&:hover,
	&:focus,
	&:active {
		background: none;
		color: ${props =>
			getColor(props, 'color', 'main') || props.theme.colors.text.main};
		box-shadow: 0px -1px 0 0px inset;
	}
{'fraction_non_alphanumeric': 0.17829298317603612, 'fraction_numerical': 0.013746409519901519, 'mean_word_length': 4.392699115044247, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 35, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1429914', 'n_tokens_mistral': 1851, 'n_tokens_neox': 1746, 'n_words': 424}