/*  ===========================================================================  
    Buttons
    =========================================================================== */

.cidk-button-area {
	display: flex;
	justify-content: space-between;
}

.cidk-button-area > * {
	flex: 1;
	margin-right: var(--groupui-sys-spacing-600);
}

.cidk-button-area > *:last-child {
	margin-right: 0;
}

.cidk-groupui-button-container {
	margin: var(--groupui-sys-spacing-400) 0;
}

.cidk-groupui-btn {
	display: block;
	box-sizing: border-box;
	width: 100%;
	border-radius: var(--groupui-sys-border-radius-s);
	border: none;
	font-size: var(--groupui-sys-font-size-400);
	font-family: var(--groupui-sys-font-family-primary);
	font-weight: var(--groupui-sys-font-weight-action);
	line-height: 2.5rem;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.cidk-groupui-btn--primary {
	background-color: var(--groupui-sys-color-action-basic-default);
	border-radius: var(--groupui-sys-border-radius-xl);
	color: var(--groupui-sys-color-on-action-basic-default);
}

.cidk-groupui-btn--primary:hover,
.cidk-groupui-btn--primary:focus {
	background-color: var(--groupui-sys-color-action-basic-hover);
}
.cidk-groupui-btn--primary:active {
	background-color: var(--groupui-sys-color-action-basic-pressed);
}

.cidk-groupui-btn--secondary {
	background-color: transparent;
	color: var(--groupui-sys-color-action-basic-default);
	border-radius: var(--groupui-sys-border-radius-xl);
	border: solid var(--groupui-sys-border-width-s)
		var(--groupui-sys-color-action-basic-default);
}

.cidk-groupui-btn--secondary:hover,
.cidk-groupui-btn--secondary:active,
.cidk-groupui-btn--secondary:focus {
	background-color: #dadde0;
}

.cidk-groupui-btn--disabled {
	background-color: var(--groupui-sys-color-action-muted-disabled);
	color: var(--groupui-sys-color-action-basic-default-inverse);
	border-radius: var(--groupui-sys-border-radius-xl);
	opacity: var(--groupui-sys-opacity-50);
	pointer-events: none;
}

.cidk-social-providers-btn-wrapper {
	margin-bottom: var(--groupui-sys-spacing-400);
}

.cidk-btn-link-style {
	background: none;
	border: none;
	box-shadow: none;
	width: auto;
	display: inline-flex;
	color: #004666;
}

.cidk-groupui-btn--secondary-white {
	background-color: var(--groupui-sys-color-action-basic-default-inverse);
	color: var(--groupui-sys-color-action-muted-pressed);
	border: solid 1px #004666;
}

.cidk-groupui-btn--secondary-white:hover,
.cidk-groupui-btn--secondary-white:active,
.cidk-groupui-btn--secondary-white:focus {
	background-color: #004666;
	color: var(--groupui-sys-color-on-action-basic-default);
}