@use 'sass:color';

@use '../../../node_modules/sass-basis/src/css/core';
@use '../../css/core/variable/variable' as *;

:root :where(p.is-style-sme-post-it-narrow) {
	--sme-post-it-narrow--background-color: #fff;
	--sme-post-it-narrow--line-size: .45rem;
	--sme-post-it-narrow--line-color: #{ core.darker(color.adjust($alert-color, $hue: -30deg)) };

	position: relative;
	z-index: 1;
	background-color: var(--sme-post-it-narrow--background-color);
	box-shadow: 1px 2px 6px rgba(#000, .1);
	padding: var(--_padding-2) var(--_padding-1) var(--_padding-2) calc(var(--_padding-1) + var(--sme-post-it-narrow--line-size));
	width: fit-content;

	&::after {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		display: block;
		width: var(--sme-post-it-narrow--line-size);
		background-color: var(--sme-post-it-narrow--line-color);
	}

	&.has-text-align-center {
		margin-right: auto;
		margin-left: auto;
	}

	&.has-text-align-right {
		margin-right: 0;
		margin-left: auto;
	}
}