/*
 * @file wui-button-0.7.css
 * @version 0.7
 * @author Sergio E. Belmar V. (wuijs.project@gmail.com)
 * @copyright Sergio E. Belmar V. (wuijs.project@gmail.com)
 */

button.wui-button {
	--button-shadow: rgba(50, 50, 93, .25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
	--button-radius: calc(var(--wui-button-default-height) / 2);
	--button-transition: border-color .2s, background-color .2s, color .2s;
	display: flex;
	cursor: pointer;
	position: relative;
	min-width: var(--wui-button-default-minwidth);
	height: var(--wui-button-default-height);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-shadow: var(--button-shadow);
	-moz-box-shadow: var(--button-shadow);
	box-shadow: var(--button-shadow);
	outline: none;
	-webkit-border-radius: var(--button-radius);
	-moz-border-radius: var(--button-radius);
	border-radius: var(--button-radius);
	border-width: var(--wui-button-default-borderwidth);
	border-style: solid;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: var(--wui-button-default-vertpadding) var(--wui-button-default-horizpadding);
	gap: 5px;
	white-space: nowrap;
	font-size: var(--wui-button-default-textsize);
	-webkit-tap-highlight-color: transparent;
	-webkit-transition: var(--button-transition);
	-moz-transition: var(--button-transition);
	transition: var(--button-transition);
}

button.wui-button.hidden {
	display: none;
}

@media screen and (max-width: 767px) {
	button.wui-button {
		--button-radius: calc(var(--wui-button-mobile-default-height) / 2);
		min-width: var(--wui-button-mobile-default-minwidth);
		height: var(--wui-button-mobile-default-height);
		font-size: 17px;
	}
}

/* wui-button default */

button.wui-button:not(.selected, .disabled) {
	border-color: var(--wui-button-default-bordercolor-out);
	background-color: var(--wui-button-default-bgcolor-out);
	color: var(--wui-button-default-textcolor-out);
}

button.wui-button:not(.selected, .disabled):is(:hover, :focus, :focus-within) {
	border-color: var(--wui-button-default-bordercolor-over);
	background-color: var(--wui-button-default-bgcolor-over);
	color: var(--wui-button-default-textcolor-over);
}

button.wui-button.selected {
	border-color: var(--wui-button-default-bordercolor-selected);
	background-color: var(--wui-button-default-bgcolor-selected);
	color: var(--wui-button-default-textcolor-selected);
}

button.wui-button.disabled {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	border-color: var(--wui-button-default-bordercolor-disabled);
	background-color: var(--wui-button-default-bgcolor-disabled);
	color: var(--wui-button-default-textcolor-disabled);
}

/* wui-button submit */

button.wui-button.submit {
	--button-radius: calc(var(--wui-button-submit-height) / 2);
	min-width: var(--wui-button-submit-minwidth);
	height: var(--wui-button-submit-height);
	-webkit-border-radius: var(--button-radius);
	-moz-border-radius: var(--button-radius);
	border-radius: var(--button-radius);
	font-size: var(--wui-button-submit-textsize);
}

button.wui-button.submit:not(.selected, .disabled) {
	border-color: var(--wui-button-submit-bordercolor-out);
	background-color: var(--wui-button-submit-bgcolor-out);
	color: var(--wui-button-submit-textcolor-out);
}

button.wui-button.submit:not(.selected, .disabled):is(:hover, :focus, :focus-within) {
	border-color: var(--wui-button-submit-bordercolor-over);
	background-color: var(--wui-button-submit-bgcolor-over);
	color: var(--wui-button-submit-textcolor-over);
}

button.wui-button.submit.selected {
	border-color: var(--wui-button-submit-bordercolor-selected);
	background-color: var(--wui-button-submit-bgcolor-selected);
	color: var(--wui-button-submit-textcolor-selected);
}

button.wui-button.submit.disabled {
	border-color: var(--wui-button-submit-bordercolor-disabled);
	background-color: var(--wui-button-submit-bgcolor-disabled);
	color: var(--wui-button-submit-textcolor-disabled);
}

@media screen and (max-width: 767px) {
	button.wui-button.submit {
		--button-radius: calc(var(--wui-button-mobile-submit-height) / 2);
		height: var(--wui-button-mobile-submit-height);
		font-size: 17px;
	}
}

/* wui-button warning */

button.wui-button.warning:not(.selected, .disabled) {
	border-color: var(--wui-button-warning-bordercolor-out);
	background-color: var(--wui-button-warning-bgcolor-out);
	color: var(--wui-button-warning-textcolor-out);
}

button.wui-button.warning:not(.selected, .disabled):is(:hover, :focus, :focus-within) {
	border-color: var(--wui-button-warning-bordercolor-over);
	background-color: var(--wui-button-warning-bgcolor-over);
	color: var(--wui-button-warning-textcolor-over);
}

button.wui-button.warning.selected {
	border-color: var(--wui-button-warning-bordercolor-selected);
	background-color: var(--wui-button-warning-bgcolor-selected);
	color: var(--wui-button-warning-textcolor-selected);
}

button.wui-button.warning.disabled {
	border-color: var(--wui-button-warning-bordercolor-disabled);
	background-color: var(--wui-button-warning-bgcolor-disabled);
	color: var(--wui-button-warning-textcolor-disabled);
}

/* wui-button flat */

button.wui-button.flat {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

/* wui-icon */

button.wui-button > .wui-icon {
	-khtml-opacity: 1;
	-moz-opacity: 1;
	opacity: 1;
	width: 24px;
	height: 24px;
}

button.wui-button:not(.selected, .disabled) > .wui-icon {
	background-color: var(--wui-button-default-textcolor-out);
}

button.wui-button:not(.selected, .disabled):is(:hover, :focus, :focus-within) > .wui-icon {
	background-color: var(--wui-button-default-textcolor-over);
}

button.wui-button.selected > .wui-icon {
	background-color: var(--wui-button-default-textcolor-selected);
}

button.wui-button.disabled > .wui-icon {
	background-color: var(--wui-button-default-textcolor-disabled);
}

button.wui-button.submit:not(.selected, .disabled) > .wui-icon {
	background-color: var(--wui-button-submit-textcolor-out);
}

button.wui-button.submit:not(.selected, .disabled):is(:hover, :focus, :focus-within) > .wui-icon {
	background-color: var(--wui-button-submit-textcolor-over);
}

button.wui-button.submit.selected > .wui-icon {
	background-color: var(--wui-button-submit-textcolor-selected);
}

button.wui-button.submit.disabled > .wui-icon {
	background-color: var(--wui-button-submit-textcolor-disabled);
}

button.wui-button.warning:not(.selected, .disabled) > .wui-icon {
	background-color: var(--wui-button-warning-textcolor-out);
}

button.wui-button.warning:not(.selected, .disabled):is(:hover, :focus, :focus-within) > .wui-icon {
	background-color: var(--wui-button-warning-textcolor-over);
}

button.wui-button.warning.selected > .wui-icon {
	background-color: var(--wui-button-warning-textcolor-selected);
}

button.wui-button.warning.disabled > .wui-icon {
	background-color: var(--wui-button-warning-textcolor-disabled);
}

button.wui-button > .wui-icon:is(.float-left, .float-right) {
	position: absolute;
}

button.wui-button > .wui-icon.float-left {
	left: var(--wui-button-icon-float-padding);
}

button.wui-button > .wui-icon.float-right {
	right: var(--wui-button-icon-float-padding);
}

@media screen and (max-width: 767px) {
	button.wui-button > .wui-icon.float-left {
		left: var(--wui-button-mobile-icon-float-padding);
	}

	button.wui-button > .wui-icon.float-right {
		right: var(--wui-button-mobile-icon-float-padding);
	}
}