@import '../website-colors.styles.scss';

:host {
	::ng-deep {
		.mat-select {
			background-color: transparent !important;
			border-radius: 4px;
			font-weight: 500;
			font-size: 16px !important;
			.mat-select-arrow {
				border-radius: 10px;
				border-inline-start: 4px solid transparent;
				border-inline-end: 4px solid transparent;
				border-top: 4px solid $color-dark-blue;
			}
		}

		.mat-select-value-text {
			color: $color-dark-blue;
		}

		.mat-form-field-appearance-fill .mat-select-arrow-wrapper,
		.mat-form-field-appearance-outline .mat-select-arrow-wrapper {
			transform: none !important;
		}
	}
}

::ng-deep {
	.mat-select-panel {
		border-radius: 10px !important;
		background-color: $color-white !important;
		box-shadow: 2px 2px 4px 0px #00000040 !important;
	}

	.mat-option.mat-selected:not(.mat-option-disabled),
	.mat-option:not(.mat-option-disabled) :hover,
	.mat-option.mat-active,
	.mat-option:hover:not(.mat-option-disabled),
	.mat-option:focus:not(.mat-option-disabled) {
		background-color: $color-container-background !important;
		.mat-pseudo-checkbox-checked {
			border-color: $color-primary !important;
			background-color: $color-primary !important;
		}
	}

	.mat-option.mat-selected:not(.mat-option-disabled) {
		color: $color-primary;
	}

	.mat-option:not(.mat-option-disabled, .mat-selected) {
		color: $color-medium-dark !important;
	}

	.mat-selected:not(.mat-option-disabled) {
		font-weight: 500 !important;
	}

	.mat-slide-toggle-content {
		color: $color-medium-dark !important;
		font-weight: 500 !important;
		font-size: 14px;
	}

	.mat-select-panel .mat-option {
		line-height: normal !important;
	}

	.mat-checkbox-frame,
	.mat-option-pseudo-checkbox {
		border-color: $color-medium-dark !important;
	}

	.mat-checkbox-frame,
	.mat-checkbox-background {
		border-radius: 3px !important;
	}

	.mat-pseudo-checkbox-checked {
		border-color: $color-primary !important;
		background-color: $color-primary !important;
	}

	.mat-checkbox-inner-container {
		margin-inline-end: 10px;
	}

	.mat-checkbox-label {
		font-size: 14px;
		color: $color-medium-dark;
		font-weight: 600;
		line-height: normal !important;
	}

	.mat-checkbox-layout {
		white-space: normal !important;
	}
}
