%btn {
}

.btn {
	@include comp();
	display: inline-block;
	text-align: center;
	color: $color;
	background-color: $color-bg;
	box-shadow: inset 0 0 1px $color-border;
	padding: $comp-gap-y $comp-gap-x;
	font-size: $comp-font-size;
	height: $comp-height;
	line-height: $comp-line-height;
	border-radius: $comp-border-radius;
	width: 100%;
	max-width: $comp-max-width;
	@include singleline();
	cursor: pointer;
	transition: opacity $animation-time ease-in-out;
	opacity: 0.95;
	@include hover() {
		opacity: 1;
	}
	&[disabled] {
		--color: #{$color-default-l1} !important;
		--color-bg: #{$color-bg-default-l1} !important;
		--color-border: #{$color-default-l1} !important;
		--color-active: #{$color-default-l1} !important;
		--color-bg-active: #{$color-bg-default-l1} !important;
		--color-border-active: #{$color-default-l1} !important;
	}
	&.loading {
		opacity: 0.5 !important;
		cursor: wait !important;
	}
	&.active {
		color: $color-active;
		background-color: $color-bg-active;
		box-shadow: inset 0 0 1px $color-border-active;
	}
}

[data-role*='dropdownbutton'] {
	display: flex;
	position: relative;
	@include comp();
	max-width: $comp-max-width;

	&.active {
		color: $color-active;
		a {
			color: $color-active;
			background-color: $color-bg-active;
			box-shadow: 0 0 1px $color-border-active;
		}
	}
	a {
		color: $color;
		background-color: $color-bg;
		box-shadow: 0 0 1px $color-border;
		transition: opacity $animation-time ease-in-out;
		&[disabled] {
			--color: #{$color-default} !important;
			--color-bg: #{$color-default-l1} !important;
			--color-border: #{$color-default-l1} !important;
		}
		&.loading {
			opacity: 0.5 !important;
			cursor: wait !important;
		}
	}
	> a {
		text-align: center;
		padding: $comp-gap-y $comp-gap-x;
		font-size: $comp-font-size;
		height: $comp-height;
		line-height: $comp-line-height;
		border-radius: $comp-border-radius;
	}
	& > a:first-of-type {
		width: 100%;
		border-right: 1px solid $color-bg-default-l1;
		border-bottom-right-radius: 0;
		border-top-right-radius: 0;
	}
	& > a:last-of-type {
		width: $comp-size-4;
		flex-shrink: 0;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
	.dropdown-button-list {
		position: absolute;
		color: $color;
		top: calc(#{$comp-size-3} + #{$gxs});
		left: 0;
		right: 0;
		z-index: $ui-buttongroup-index;
		display: none;
		> a {
			~ a {
				border-top: 1px solid $color-bg-default-l1;
			}
			&:first-of-type {
				border-top-left-radius: $comp-border-radius;
				border-top-right-radius: $comp-border-radius;
			}
			&:last-of-type {
				border-bottom-left-radius: $comp-border-radius;
				border-bottom-right-radius: $comp-border-radius;
			}
			padding: $comp-gap-y $comp-gap-x;
			font-size: $comp-font-size;
			height: $comp-height;
			line-height: $comp-line-height;
			display: block;
			@include singleline();
		}
	}
}