.group-btn {
	--group-btn-color: var(--color);
	--group-btn-background-color: var(--color-bg);
	--group-btn-border-color: var(--color-border);
	--group-btn-color-active: var(--color-active);
	--group-btn-background-color-active: var(--color-bg-active);
	border-radius: 6px;
	margin: 0;
	overflow: hidden;
	display: flex;
	flex-wrap: nowrap;
	border: 1px solid var(--group-btn-border-color);
	input {
		&:checked + span {
			background-color:  var(--group-btn-border-color);
			color: $color-bg;
		}
	}
	> label {
		flex: 1;
		overflow: hidden;
		margin-right: 0;
		border-color: var(--group-btn-border-color);
		+ label {
			border-left: 1px dashed var(--group-btn-border-color);
		}
		span {
			display: block;
			@include form-default-1();
			color: var(--group-btn-color);
			background-color:var(--group-btn-background-color);
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			cursor: pointer;
			&:before {
				display: none;
			}
		}
	}
	input {
		&:checked + span {
			color: var(--group-btn-color-active);
			background-color:var(--group-btn-background-color-active);
		}
	}

	input {
		display: none;
	}

	&.large {
		> label span {
			@include form-large-1();
		}
	}

	&.small {
		> label span {
			@include form-small();
		}
	}
}