.rrui__button
{
	display          : inline-flex;
	align-items      : center;
	justify-content  : center;
	position         : relative;
	height           : var(--rrui-input-height);
	padding-left     : var(--rrui-button-side-padding);
	padding-right    : var(--rrui-button-side-padding);
	box-sizing       : border-box;
	transition       : var(--rrui-button-transition);
	background-color : var(--rrui-button-background-color);
	color            : var(--rrui-button-text-color);
	border-radius    : var(--rrui-button-border-radius);
	border           : var(--rrui-button-border-width) solid var(--rrui-button-border-color);
}

.rrui__button:active
{
	background-color : var(--rrui-button-background-color-active);
	color            : var(--rrui-button-text-color-active);
}

.rrui__button--busy,
.rrui__button--disabled
{
	/* "pointer-events" prevents "cursor: wait" from working */
	pointer-events : none;
}

.rrui__button--stretch
{
	display : flex;
	width   : 100%;
}

.rrui__button--link:hover
{
	text-decoration : none;
}

.rrui__button__busy
{
	display    : block;
	position   : absolute;
	left       : var(--rrui-button-side-padding);
	bottom     : var(--rrui-button-busy-indicator-bottom);
	width      : calc(100% - 2 * var(--rrui-button-side-padding));
	height     : var(--rrui-button-busy-indicator-width);
	overflow   : hidden;
	opacity    : 0;
	transition : opacity 300ms ease-out 0ms;
}

.rrui__button__busy--after-show
{
  opacity    : 1;
  transition : opacity 700ms ease-out 200ms;
}

.rrui__button__busy:before
{
	display          : block;
	position         : absolute;
	content          : "";
	left             : -40%;
	width            : 40%;
	height           : 100%;
	background-color : currentColor;
	animation        : rrui__button__busy 2s ease-in infinite;
}

/* Based on "CSS indeterminate progress" example. */
/* https://codepen.io/brunjo/pen/XJmbNz */
@keyframes rrui__button__busy
{
	from { left : -40%; width : 40%;  }
	50%  {              width : 70%;  }
	70%  {              width : 85%; }
	80%  { left : 30%;  width : 100%; }
	95%  { left : 60%; }
	to   { left : 100%; }
}