@use "@wordpress/base-styles/colors" as *;

.editor-keyboard-shortcut-help-modal {
	&__section {
		margin: 0 0 2rem 0;
	}

	&__section-title {
		font-size: 0.9rem;
		font-weight: 600;
	}

	&__shortcut {
		display: flex;
		align-items: baseline;
		padding: 0.6rem 0;
		border-top: 1px solid $gray-300;
		margin-bottom: 0;

		&:last-child {
			border-bottom: 1px solid $gray-300;
		}

		&:empty {
			display: none;
		}
	}

	&__shortcut-term {
		font-weight: 600;
		margin: 0 0 0 1rem;
		text-align: right;
	}

	&__shortcut-description {
		flex: 1;
		margin: 0;
	}

	&__shortcut-key-combination {
		display: block;
		background: none;
		margin: 0;
		padding: 0;

		& + .editor-keyboard-shortcut-help-modal__shortcut-key-combination {
			margin-top: 10px;
		}
	}

	&__shortcut-key {
		padding: 0.25rem 0.5rem;
		border-radius: 8%;
		margin: 0 0.2rem 0 0.2rem;

		&:last-child {
			margin: 0 0 0 0.2rem;
		}
	}
}