// 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';

div.api-props-filter {
	right: 0;
	left: globals.$u-sidebar-width;
	padding-top: spacing.u-spacing( -1 );
	margin-bottom: 0;
	text-align: center;

	@include globals.u-sticky-filter;

	h4 {
		@include globals.u-micro-header;
	}

	ul {
		list-style: none;
		margin: 0;
	}

	label {
		cursor: pointer;
	}

	input:checked + label span {
		color: color.u-color( 'text-invert' );
		background: color.u-color( 'selected' );
		border-color: color.u-color( 'selected' );

		&:hover {
			background: color.u-color( 'selected', 5% );
		}
	}

	&__inner {
		text-align: left;
		margin: 0 auto;
		padding-left: 0;

		@include globals.u-responsive-narrow {
			padding: {
				left: globals.$u-content-margin;
				right: globals.$u-content-margin;
			}
			width: globals.$u-content-max-width;
		}

		@include globals.u-responsive-wide {
			width: globals.$u-content-min-width + globals.$u-sidebar-width;
		}

		@include globals.u-responsive-wide-md {
			width: globals.$u-content-md-width + globals.$u-sidebar-width;
		}

		@include globals.u-responsive-wide-plus {
			width: globals.$u-content-max-width + globals.$u-sidebar-width;
		}
	}

	ul, h4 {
		display: inline-block;
		vertical-align: middle;
	}

	h4 {
		margin: 0 spacing.u-spacing( 2 ) 0 0;
		padding: 0;

		&::before {
			content: url( ../img/filter.svg );
			display: inline-block;
			width: 13px;
			float: left;
			margin-right: spacing.u-spacing( -2 );
			position: relative;
			top: 2px;
		}

		@include globals.u-responsive-narrow {
			display:none;
		}
	}

	&::before {
		display: none;
	}

	ul {
		padding: 0;
	}

	li {
		display: inline-block;
		margin-left: spacing.u-spacing( -2 );
	}

	input {
		display: none;
	}
}
