.ellipsis-button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background-color: var(--color-background);
	color: var(--color-text);
	border: 1px solid var(--color-secondary);
	border-radius: var(--border-radius);
	font-size: var(--bb-rl-font-size-base);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	outline: none;

	&--large {
		width: 48px;
		height: 48px;
		font-size: 1.5rem;
	}

	&--medium {
		width: 36px;
		height: 36px;
		font-size: 1.25rem;
	}

	&--small {
		width: 24px;
		height: 24px;
		font-size: 1rem;
	}

	/* States */
	&--default {
		background-color: var(--color-background);
		border-color: var(--color-secondary);
	}

	&:hover {
		background-color: var(--color-secondary);
		color: var(--color-background);
	}

	&:focus {
		border-color: var(--color-primary);
		box-shadow: 0 0 0 2px var(--color-primary-light);
	}

	&--disabled {
		background-color: var(--color-disabled-background);
		color: var(--color-disabled-text);
		cursor: not-allowed;
		border-color: var(--color-disabled-border);
	}
}
