monaco-editor-core/esm/vs/base/browser/ui/radio/radio.css

A browser based code editor

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-custom-radio {
	display: flex;
}

.monaco-custom-radio > .monaco-button {
	border-radius: 0;
	font-size: 0.9em;
	line-height: 1em;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

.monaco-custom-radio > .monaco-button:first-child {
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

.monaco-custom-radio > .monaco-button:last-child {
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

.monaco-custom-radio:not(.segmented) > .monaco-button:not(.active):not(:last-child) {
	border-right: none;
}

.monaco-custom-radio:not(.segmented) > .monaco-button.previous-active {
	border-left: none;
}

/* default color styles - based on CSS variables */

.monaco-custom-radio > .monaco-button {
	color: var(--vscode-radio-inactiveForeground);
	background-color: var(--vscode-radio-inactiveBackground);
	border-color: var(--vscode-radio-inactiveBorder, transparent);
}

.monaco-custom-radio > .monaco-button.active:hover,
.monaco-custom-radio > .monaco-button.active {
	color: var(--vscode-radio-activeForeground);
	background-color: var(--vscode-radio-activeBackground);
	border-color: var(--vscode-radio-activeBorder, transparent);
}

.hc-black .monaco-custom-radio:not(.segmented) > .monaco-button.active,
.hc-light .monaco-custom-radio:not(.segmented) > .monaco-button.active {
	border-color: var(--vscode-radio-activeBorder, transparent);
}

.hc-black .monaco-custom-radio:not(.segmented) > .monaco-button:not(.active),
.hc-light .monaco-custom-radio:not(.segmented) > .monaco-button:not(.active) {
	border-color: var(--vscode-radio-inactiveBorder, transparent);
}

.hc-black .monaco-custom-radio:not(.segmented) > .monaco-button:not(.active):hover,
.hc-light .monaco-custom-radio:not(.segmented) > .monaco-button:not(.active):hover {
	outline: 1px dashed var(--vscode-toolbar-hoverOutline);
	outline-offset: -1px
}

.monaco-custom-radio > .monaco-button:hover:not(.active) {
	background-color: var(--vscode-radio-inactiveHoverBackground);
}

/* optional segmented appearance - opt in via IRadioOptions.className */

.monaco-custom-radio.segmented {
	position: relative;
	align-items: center;
	gap: var(--vscode-spacing-size20);
	padding: var(--vscode-spacing-size20);
	border: var(--vscode-strokeThickness) solid var(--vscode-contrastBorder, var(--vscode-radio-inactiveBorder, transparent));
	border-radius: var(--vscode-cornerRadius-medium);
	background: transparent;
}

/* Reserve the selected segment's high-contrast border without shifting the options. */
.monaco-custom-radio.segmented > .monaco-button {
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	justify-content: center;
	height: var(--vscode-spacing-size240);
	padding: var(--vscode-spacing-sizeNone) var(--vscode-spacing-size60);
	border: var(--vscode-strokeThickness) solid transparent;
	border-radius: var(--vscode-cornerRadius-small);
	color: var(--vscode-foreground);
	background: transparent;
	font-size: var(--vscode-fontSize-label2);
	font-weight: var(--vscode-fontWeight-regular);
	white-space: nowrap;
}

/* Reserve the selected label's width without making unselected labels bold. */
.monaco-custom-radio.segmented > .monaco-button > [data-label] {
	display: inline-grid;
	justify-items: center;
}

.monaco-custom-radio.segmented > .monaco-button > [data-label]::after {
	content: attr(data-label);
	height: 0;
	font-weight: var(--vscode-fontWeight-semiBold);
	visibility: hidden;
	pointer-events: none;
}

.monaco-custom-radio.segmented > .monaco-button:hover:not(.active) {
	color: var(--vscode-foreground);
	background: var(--vscode-toolbar-hoverBackground);
}

.monaco-custom-radio.segmented > .monaco-button.active,
.monaco-custom-radio.segmented > .monaco-button.active:hover,
.monaco-custom-radio.segmented > .monaco-radio-selection {
	color: var(--vscode-foreground);
	background: color-mix(in srgb, var(--vscode-foreground) 10%, transparent);
	border-color: var(--vscode-contrastActiveBorder, transparent);
	box-shadow: none;
	font-weight: var(--vscode-fontWeight-semiBold);
}

.monaco-custom-radio.segmented > .monaco-radio-selection {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	border: var(--vscode-strokeThickness) solid var(--vscode-contrastActiveBorder, transparent);
	border-radius: var(--vscode-cornerRadius-small);
	pointer-events: none;
	transition: none;
}

.monaco-custom-radio.segmented.selection-indicator-ready > .monaco-radio-selection {
	display: block;
}

.monaco-custom-radio.segmented.selection-indicator-ready > .monaco-button.active,
.monaco-custom-radio.segmented.selection-indicator-ready > .monaco-button.active:hover {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

@media (prefers-reduced-motion: no-preference) {
	.monaco-custom-radio.segmented > .monaco-radio-selection {
		transition: scale 100ms ease-out;
	}

	.monaco-custom-radio.segmented.animate-selection > .monaco-radio-selection {
		transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1), width 160ms cubic-bezier(0.2, 0.8, 0.2, 1), scale 100ms ease-out;
	}

	.monaco-custom-radio.segmented:active > .monaco-radio-selection {
		scale: 0.96;
	}
}

.monaco-reduce-motion .monaco-custom-radio.segmented > .monaco-radio-selection {
	transition: none;
	scale: 1;
}

.monaco-custom-radio.segmented > .monaco-button:focus-visible {
	outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder);
	outline-offset: calc(-1 * var(--vscode-strokeThickness));
}

.monaco-custom-radio.segmented > .monaco-button:focus:not(:focus-visible) {
	outline: none;
}