// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
// For licensing, see LICENSE.md.

/*
 * Styles for CKEditor 4 SDK examples.
 * `.main__content--sdk` is added when `page.isSdk` = true.
 */

@use '../helpers/color';
@use '../helpers/font';
@use '../helpers/spacing';

.main__content--sdk {
	h1 {
		// "Documentation" link in the title.
		> a { // #715
			font-size: 0.5em;
			display: table;
		}
	}

	ul.sdk-sample-source-code {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	// Toggler
	a.sdk-sample-source-code__button {
		width: 100%;
		background: color.u-color( 'background-hue-light' );
		display: block;
		padding: 10px 20px;
		position: relative;
		border-left: 3px solid color.u-color( 'hint-info' );
		transition: 200ms ease background;
		text-decoration: none;

		&::after {
			content: '';
			border-width: 3px 3px 0 0;
			border-style: solid;
			border-color: color.u-color( 'hint-info' );
			width: 12px;
			height: 12px;
			transform: rotate(135deg);
			position: absolute;
			right: 20px;
			top: 15px;
		}

		&:hover,
		&.active {
			background: color.u-color( 'background-hue' );
		}

		// rotate arrow if active
		&.active {
			&::after{
				top: 20px;
				transform: rotate(-45deg);
			}
		}
	}

	pre.sdk-sample-source-code__code-block {
		display: none;
		padding: 0;
		position: relative;
		@include font.u-font-mono;

		&.active {
			display: block;
		}
	}

	.sdk-sample-source-code__code-block-action-buttons {
		position: absolute;
		top: 20px;
		right: 0;

		// copy and download buttons
		a {
			background: color.u-color( 'background-hue-light' );
			padding: spacing.u-spacing( 0 );
			display: inline-block;
			text-decoration: none;

			&:hover {
				opacity: 1;
				background: color.u-color( 'background-hue' )
			}
		}
	}

	.sdk-sample-source-code__code-block-copy {

	}

	.sdk-sample-source-code__code-block-download {

	}

	p {
		img {
			display: inline;
			vertical-align: middle;
			margin: 0;
		}
	}
}
