.members-settings {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
	padding: var(--padding-4) var(--padding-2) var(--padding-6) var(--padding-4);
	height: 100%;

	&__header {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-2);
	}

	&__title {
		font-size: var(--label-large-500-font-size);
		font-weight: var(--label-large-500-font-weight);
		color: var(--l1-foreground);
		letter-spacing: -0.09px;
		line-height: var(--line-height-normal);
		margin: 0;
	}

	&__subtitle {
		font-size: var(--paragraph-base-400-font-size);
		font-weight: var(--paragraph-base-400-font-weight);
		color: var(--foreground);
		letter-spacing: -0.07px;
		line-height: var(--paragraph-base-400-line-height);
		margin: 0;
	}

	&__controls {
		display: flex;
		align-items: center;
		gap: var(--spacing-4);
	}

	&__search {
		flex: 1;
		min-width: 0;
	}
}

.members-filter-trigger {
	display: flex;
	align-items: center;
	gap: var(--spacing-2);
	border: 1px solid var(--l1-border);
	border-radius: 2px;
	background-color: var(--l2-background);

	> span {
		color: var(--foreground);
	}

	&__chevron {
		flex-shrink: 0;
		color: var(--foreground);
	}
}

.members-filter-dropdown {
	.ant-dropdown-menu {
		padding: var(--padding-3) 14px;
		border-radius: 4px;
		border: 1px solid var(--l1-border);
		background: var(--l2-background);
		backdrop-filter: blur(20px);
	}

	.ant-dropdown-menu-item {
		background: transparent !important;
		padding: var(--padding-1) 0 !important;

		&:hover {
			background: transparent !important;
		}
	}
}

.members-filter-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--paragraph-base-400-font-size);
	font-weight: var(--paragraph-base-400-font-weight);
	color: var(--foreground);
	letter-spacing: 0.14px;
	min-width: 170px;

	&:hover {
		color: var(--card-foreground);
		background: transparent;
	}
}

.members-search-input {
	height: 32px;
	color: var(--l1-foreground);
	background-color: var(--l2-background);
	border-color: var(--l1-border);

	&::placeholder {
		color: var(--l3-foreground);
	}
}
