@import (reference) '../../styles/variables';

.jodit-toolbar {
	// 에디터 상단에 툴바
	&__box {
		&:not(:empty) {
			--color-background-default: var(--color-panel);

			overflow: hidden;
			border-bottom: 1px solid var(--color-border);
			background-color: var(--color-panel);
			//border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
			border-radius: 0;
		}

		// Custom
		.jodit-toolbar-editor-collection {
			// background-image: none !important;

			// media toolbar 가 아닌 ui group에만 적용
			// & > div.jodit-ui-group {
			// 	padding-left: 20px;
			// 	&:not(.jodit-media-toolbar) {
			// 		padding-left: 30px;
			// 	}
			// }

			& > div.jodit-ui-group {
				margin-left: 30px;
				span.jodit-toolbar-button {
					// format-block.ts
					&_block_type {
						.jodit-toolbar-button {
							&__button {
								display: flex;
								width: 100px;
							}

							&__text {
								justify-content: flex-start;
							}
						}
					}
				}
			}

			// Media toolbar
			& > .jodit-ui-group.jodit-media-toolbar {
				border-bottom: 1px solid var(--color-border);
				span.jodit-toolbar-button {
					// height: 90px;
					// margin: 0;

					button {
						// width: 90px;
						// padding: 10px 0px;
						// display: flex;
						// flex-direction: column;
						// align-content: center;
						// justify-content: center;

						span {
							&.jodit-toolbar-button__icon {
								// width: 32px;
								// height: 32px;
								// display: flex;
								// justify-content: center;
								// align-content: center;

								svg {
									// width: 100%;
									// height: 100%;
								}
							}
							&.jodit-toolbar-button__text {
								// margin: 2px 0 0 0;
								// font-size: 12px;
								// font-weight: 300;
							}
						}
					}
				}
			}
		}
	}
}