@import '../../styles/variables';
@import '../../styles/mixins';

$buttons-large-height: $buttons-height + 0.5556rem;
$buttons-small-height: $buttons-height - 0.5556rem;

.button {
	color: white;
	border: 0;
	background-color: var(--color-primary);
	text-decoration: none;
	text-align: center;
	display: block;
	border-radius: 0.25rem;
	line-height: $buttons-height;
	box-sizing: border-box;
	appearance: none;
	padding: 0 0.8rem;
	margin: 0;
	height: $buttons-height;
	white-space: nowrap;
	position: relative;
	text-overflow: ellipsis;
	font-size: 0.8rem;
	cursor: pointer;
	transition: 0.2s background-color;

	input[type="submit"] & {
		width: 100%;
	}

	input[type="button"] & {
		width: 100%;
	}

	&.button-block {
		width: 100%;
	}

	&:active {
		background-color: var(color-primary-shade);
	}

	&.button-round,
	.button-round & {

		&,
		&:after {
			border-radius: ($buttons-height - 0.1rem);
		}

		&.button-large:after {
			border-radius: ($buttons-large-height - 0.1rem);
		}
	}

	&.active {

		&,
		&:active {
			background-color: var(--color-primary-shade);
		}
	}

	&.button-large,
	.button-large & {
		font-size: 0.9rem;
		height: $buttons-large-height;
		line-height: $buttons-large-height;
	}

	&.button-small,
	.button-small & {
		font-size: 0.7rem;
		display: inline-block;
		height: $buttons-small-height;
		line-height: $buttons-small-height;
	}

	i.icon {
		&:first-child {
			margin-right: 0.5rem;
		}

		&:last-child {
			margin-left: 0.5rem;
		}

		&:first-child:last-child {
			margin-left: 0;
			margin-right: 0;
		}
	}

	@each $name, $color in $colors {
		#{'&.button-' + $name} {
			@include button-variant(#{'var(--color-' + $name + ')'}, #{'var(--color-' + $name + '-shade)'});

			&.disabled {
				@include hairline-border-remove();
				@include button-variant(#c8c9cb, #c8c9cb);
				color: white;
				cursor: not-allowed;
			}
		}
	}

	& {
		&.disabled {
			@include hairline-border-remove();
			@include button-variant(#c8c9cb, #c8c9cb);
			color: white;
			cursor: not-allowed;
		}
	}
}

.button-light {
	@include button-variant(#f7f7f7, #dedede);
	@include hairline-border(rgba(0, 0, 0, .2), .25rem);
	color: var(--color-text);
}

.button.button-bordered,
.button-bordered .button {
	background-color: transparent;

	@include hairline-border(#{'var(--color-primary)'}, .25rem);
	@include button-bordered-variant(#{'var(--color-primary)'}, #{'var(--color-primary-shade)'});

	.button-round &,
	&.button-round {
		&:after {
			border-radius: $buttons-height;
		}

		&.button-large,
		.button-large & {
			&:after {
				border-radius: $buttons-large-height;
			}
		}
	}

	@each $name, $color in $colors {
		#{'&.button-' + $name} {
			@include button-bordered-variant(#{'var(--color-' + $name + ')'}, #{'var(--color-' + $name + '-shade)'});
		}
	}

	&.disabled,
	&[disabled] {
		color: #c8c9cb;
		background: transparent;
		cursor: not-allowed;

		&:after {
			border-color: #c8c8cb;
		}

		&:active {
			background-color: transparent;
			color: #c8c9cb;

			&:after {
				border-color: #c8c8cb;
			}
		}
	}
}

.buttons-group,
.buttons-tab {
	z-index: 10;
	flex-wrap: nowrap;
	align-self: center;
	@include flexbox();
}

.buttons-group {
	margin: 1rem 0;

	.button {
		border-radius: 0 0 0 0;
		width: 100%;
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1;

		@include hairline(left, rgba(0, 0, 0, 0.15));
	}

	.button:first-child {
		border-radius: 0.25rem 0 0 0.25rem;
		@include hairline-remove(left);
	}

	.button:last-child {
		border-radius: 0 0.25rem 0.25rem 0;
	}

	.button.button-round:first-child {
		border-radius: 1.35rem 0 0 1.35rem;
	}

	.button.button-round:last-child {
		border-radius: 0 1.35rem 1.35rem 0;
	}
}

.buttons-group.button-bordered {
	border-radius: .25rem;
	@include hairline-border(#{'var(--color-primary)'}, .25rem);

	.button {
		position: relative;
		z-index: 1;

		&:before {
			background-color: var(--color-primary);
		}

		@include hairline-border-remove();

		&.active,
		&:active {
			background-color: var(--color-primary);
			color: white;
		}
	}

	&.button-round {
		@include hairline-border(#{'var(--color-primary)'}, $buttons-height);

		.button {
			&:first-child {
				border-radius: $buttons-height 0 0 $buttons-height;
			}

			&:last-child {
				border-radius: 0 $buttons-height $buttons-height 0;
			}
		}

		&.button-small {
			@include hairline-border(#{'var(--color-primary)'}, $buttons-small-height);

			.button {
				&:first-child {
					border-radius: $buttons-small-height 0 0 $buttons-small-height;
				}

				&:last-child {
					border-radius: 0 $buttons-small-height $buttons-small-height 0;
				}
			}
		}

		&.button-large {
			@include hairline-border(#{'var(--color-primary)'}, $buttons-large-height);

			.button {
				&:first-child {
					border-radius: $buttons-large-height 0 0 $buttons-large-height;
				}

				&:last-child {
					border-radius: 0 $buttons-large-height $buttons-large-height 0;
				}
			}
		}
	}
}

.buttons-tab {
	background: white;
	position: relative;
	@include hairline(bottom, #d0d0d0);

	.button {
		color: var(--color-text);
		font-size: 0.8rem;
		width: 100%;
		height: 2rem;
		line-height: 2rem;
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1;
		border: 0;
		border-bottom: 1px solid transparent;
		border-radius: 0;
		background-color: transparent;

		&.active {
			color: var(--color-primary);
			border-color: var(--color-primary);
			background: transparent;
			z-index: 100;
		}
	}
}


.ripple-container {
	position: absolute;
	left: 0;
	top: 0;
	height: 0;
	width: 0;
	pointer-events: none;
	overflow: hidden;

	.ripple {
		background-color: rgba(0, 0, 0, 0.15);

		.app.dark & {
			background-color: rgba(255, 255, 255, 0.15);
		}
	}
}

.ripple-effect {
	margin-top: 0px;
	margin-left: 0px;
	width: 1px;
	height: 1px;
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	border-radius: 50%;
	pointer-events: none;
	position: relative;
	z-index: 9999;
}

.fab-button {
	text-align: center;
	border-radius: 50%;
	position: relative;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	width: 56px;
	height: 56px;
	font-size: 1.5rem;
	line-height: 1em;
	text-overflow: ellipsis;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color, opacity .1s linear;
	background-clip: padding-box;
	font-kerning: none;
	user-select: none;
	contain: strict;
	outline: none;

	color: var(--color-dark-text, #fff);
	background-color: var(--background-color, #488aff);
	transition: box-shadow .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1),color .3s cubic-bezier(.4,0,.2,1);

	&:active {
		outline: none;
	}
	
	.icon, [class^="icon-"] {
		flex: 1;
		font-size: 1.5rem;
		line-height: 1em;
		width: 1em;
		height: 1em;
		margin: 0px;
	}
}