@use "../variables" as *;

/**
 * Color control
 */
.tsc-color-control {
	&__button {
		align-items: center;
		background-color: transparent;
		border: none;
		border-radius: 0;
		cursor: pointer;
		color: $text-color--black;
		display: flex;
		flex-direction: row;
		font-size: 13px;
		gap: 8px;
		justify-content: flex-start;
		line-height: 40px;
		margin: 0;
		padding: 0 10px;
		width: 100%;

		&--active {
			background-color: $background-color--gray;
		}

		&--active,
		&:hover,
		&:focus {
			color: var(--wp-components-color-accent, var(--wp-admin-theme-color, $wp-admin-default--accent));
		}
	}

	/**
	 * Adjustments - needs review from time to time
	 */
	.components-dropdown {
		display: block;
	}

	&__popover {
		.components-popover__content {
			padding: 0;
			width: 260px;
		}

		.components-tab-panel__tab-content {
			padding: 16px;
		}
	}
}