.ct-buttons-group {
	display: flex;
	margin: 0;

	li {
		flex: 1 1 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		font-size: 13px;
		cursor: pointer;
		height: 30px;
		min-width: 40px;
		margin: 0;
		background: rgba(255, 255, 255, 0.6);
		box-shadow: inset 0px 0px 0px 1px var(--optionBorderColor);
		transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);

		&:hover {
			color: #444;
			background: rgba(255, 255, 255, 1);
		}

		&.active {
			z-index: 1;
			color: #fff;
			background: var(--ui-accent-color);
			box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
		}

		&:not(:first-child) {
			margin-inline-start: -1px;
		}

		// border radius
		&:first-child {
			border-start-start-radius: var(--ui-border-radius, 3px);
    		border-end-start-radius: var(--ui-border-radius, 3px);
		}

		&:last-child {
			border-start-end-radius: var(--ui-border-radius, 3px);
    		border-end-end-radius: var(--ui-border-radius, 3px);
		}
	}

	// compact type
	&[data-type="compact"] li {
		height: 26px;
	}

	// ratio buttons
	&[data-buttons="ratio"] {
		font-size: 11px;
		font-weight: 500;
		letter-spacing: 0.05em;
	}

	// meta divider
	&[data-type="meta-divider"] li {
		flex: 1 0 0;

		&:nth-child(2):before {
			content: '';
			width: 1px;
			height: 10px;
			border-radius: 2px;
			background: currentColor;
			transform: rotate(25deg);
		}

		&:nth-child(3):before {
			content: '';
			width: 10px;
			height: 1px;
			border-radius: 2px;
			background: currentColor;
		}

		&:nth-child(4):before {
			content: '●';
			font-size: 5px;
		}
	}

	// content spacing
	&[data-type="content-spacing"] li {
		height: 42px;
		
		span {
			position: relative;
			width: 18px;
			opacity: 0.9;
			background: currentColor;
			

			&:before, &:after {
				position: absolute;
				content: '';
				inset-inline-start: 0;
				width: calc(100%);
				height: 6px;
				box-sizing: border-box;
				border: 1px solid currentColor;
			}

			&:before {
				top: 1px;
				transform: translateY(-100%);
			}

			&:after {
				bottom: 1px;
				transform: translateY(100%);
			}
		}

		&:nth-child(1) span {
			height: 8px;
		}

		&:nth-child(2) span {
			top: 3px;
			height: 13px;

			&:after {
				background: currentColor;
				display: none;
			}
		}

		&:nth-child(3) span {
			bottom: 2px;
			height: 13px;

			&:before {
				display: none;
			}
		}

		&:nth-child(4) span {
			height: 18px;

			&:before, &:after {
				display: none;
			}
		}
	}
}