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

@use 'helpers/color';
@use 'helpers/globals';
@use 'helpers/spacing';
@use 'sass:math';

p.notice,
div.notice,
nav.notice,
/* Because CKEditor SDK Samples uses diffrent class. */
div.tip,
p.tip {
	position: relative;
	margin: spacing.u-spacing( 4 ) 0;
	background: color.u-color( 'background-hue' );
	border-left: 3px solid color.u-color( 'hint-info' );
	padding: spacing.u-spacing( 4 );

	p {
		&:first-of-type {
			padding-top: 0;
		}

		&:last-of-type {
			margin-bottom: 0;
		}
	}

	&::before {
		display: block;
		width: globals.$u-top-icon-width;
		height: globals.$u-top-icon-width;
		position: absolute;
		left: ( globals.$u-top-icon-width * 2 - math.div( globals.$u-top-icon-width, 2 ) ) * -1;
		top: math.div( globals.$u-top-icon-width, 2 );
	}

	@include globals.u-responsive-narrow {
		position: relative;
		background: color.u-color( 'background-dark' );

		&::before {
			display: block;
			width: globals.$u-top-icon-width;
			height: globals.$u-top-icon-width;
			position: absolute;
			left: globals.$u-top-icon-width - math.div( globals.$u-top-icon-width, 2 );
			top: math.div( globals.$u-top-icon-width, 2 );
		}
	}

	@include globals.u-responsive-mobile {
		padding: spacing.u-spacing( 0 );
		margin: spacing.u-spacing( 0 );
	}

	&__hint {
		border-left: 3px solid color.u-color( 'hint-info' );
	}

	&__feedback {
	  	border-left: 3px solid color.u-color( 'hint-hint' );
	  	background-color: rgba( color.u-color( 'hint-hint' ), .1 );
	}

	&__warning {
		border-left: 3px solid color.u-color( 'hint-warning' );
		background-color: rgba( color.u-color( 'hint-warning' ), .1 );
	}

	&__error {
		border-left: 3px solid color.u-color( 'hint-error' );
		background-color: rgba( color.u-color( 'hint-error' ), .1 );
	}

	&_menu-like {
		ul, ol {
			list-style: none;
			margin: 0;
		}

		@include globals.u-responsive-narrow {
			// background: none;

			li {
				display: inline-block;
			}
		}

		@include globals.u-responsive-wide {
			padding: spacing.u-spacing( 0 ) 0 0;

			ul, ol {
				text-align: center;

				li {
					a {
						padding: spacing.u-spacing( -1 ) spacing.u-spacing( 1 );
						display: block;

						&:hover {
							background: color.u-color( 'background-dark' );
						}
					}

					& + li {
						border-top: 1px solid color.u-color( 'separator' );
					}
				}

			}
		}
	}
}
