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

	li {
		flex: 1 1 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		cursor: pointer;
		height: 30px;
		min-width: 40px;
		margin: 0 0 0 -1px;
		background: rgba(221, 221, 221, 0.2);
		box-shadow: inset 0px 0px 0px 1px #ddd;
		transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
					background 0.15s cubic-bezier(0.4, 0, 0.2, 1),
					box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);

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

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

			&:hover {
				opacity: 0.9;
			}
		}

		// border radius
		&:first-child {
			border-top-left-radius: 3px;
			border-bottom-left-radius: 3px;
		}

		&:last-child {
			border-top-right-radius: 3px;
			border-bottom-right-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;
	}
}