/*******************************************************************************************
*   ___  _          ______                     _ _                _                        *
*  / _ \| |         | ___ \                   | (_)              | |              © 2025   *
* / /_\ | | _____  _| |_/ /_ __ __ _ _ __   __| |_ _ __   __ _   | |_ ___  __ _ _ __ ___   *
* |  _  | |/ _ \ \/ / ___ \ '__/ _` | '_ \ / _` | | '_ \ / _` |  | __/ _ \/ _` | '_ ` _ \  *
* | | | | |  __/>  <| |_/ / | | (_| | | | | (_| | | | | | (_| |  | ||  __/ (_| | | | | | | *
* \_| |_/_|\___/_/\_\____/|_|  \__,_|_| |_|\__,_|_|_| |_|\__, |  \___\___|\__,_|_| |_| |_| *
*                                                         __/ |                            *
*                                                        |___/                             *
* ---------------------------------------------------------------------------------------- *
* This is commercial software, only users who have purchased a valid license and accept    *
* to the terms of the License Agreement can install and use this program.                  *
* ---------------------------------------------------------------------------------------- *
* website: https://cs-cart.alexbranding.com                                                *
*   email: info@alexbranding.com                                                           *
*******************************************************************************************/

.ab__mb_items {
	overflow: hidden;

	.ab__mb_item {
		min-height: 50px;
		padding: 14px 0;
		background-color: var(--ab-mb-bg-color);

		&:not(:last-child) {
			margin-bottom: -1px;
		}
		&:first-child {
			.ut2_rounding_blocks_enable() when (@abt__ut2_general_use_rounding_blocks = true) {
				.ut2_round(@round: 8px 8px 0 0) when (@abt__ut2_general_use_rounding = little) {
					.border-radius(@round);
				}
				.ut2_round(@round: 12px 12px 0 0) when (@abt__ut2_general_use_rounding = full) {
					.border-radius(@round);
				}
				.ut2_round();
			}
			.ut2_rounding_blocks_enable();
		}
		&:last-child {
			.ut2_rounding_blocks_enable() when (@abt__ut2_general_use_rounding_blocks = true) {
				.ut2_round(@round: 0 0 8px 8px) when (@abt__ut2_general_use_rounding = little) {
					.border-radius(@round);
				}
				.ut2_round(@round: 0 0 12px 12px) when (@abt__ut2_general_use_rounding = full) {
					.border-radius(@round);
				}
				.ut2_round();
			}
			.ut2_rounding_blocks_enable();
		}
	    &-name {
			word-break: break-word;
			font-size: calc(~'var(--font-size-medium) - 1px');
			font-weight: 600;
			line-height: 1;
			-webkit-transition: all 150ms;
			transition: all 150ms;
	    }
	    &-title {
	        position: relative;
	        cursor: pointer;
	        display: flex;
	        align-items: center;
	        min-height: @mb_item_icon_size;
	        width: 100%;
	        padding: 0 @pdf 0 @pdi;
	        color: @mb_item_title_color;

			.ab__mb-cm-pl {
				.ut2_plus(15px, @font);
				position: absolute !important;
				right: @pdi;
			}
			img + div {
				padding-left: @pdi/2;
			}
			.ty-pict {
				width: @mb_item_icon_size + 5;
				height: auto;
				max-height: @mb_item_icon_size + 5;
			}
	        &.open {
	            margin-bottom: @pdi;

				.ab__mb-cm-pl {
					.ut2_minus(15px, fade(@font, 35%));

					&:hover:after {
						background-color: @font;
					}
				}
	        }
	    }
	    &-icon {
	        font-style: normal;
	        margin-right: 7px;
	        font-size: @mb_item_icon_size;
	        color: @mb_item_icon_color;
	    }
	    &:hover {
	        .ab__mb_item-name {
	            color: @links;
	        }
	    }
	}
	&.fill {
		&:not(.colored) {
			.ab__mb_item {
				border-top: 1px solid @base5;
				border-radius: 0;

				@media (max-width: 899px) {
					.ab__mb_item-title {
						padding-left: 0;
					}
				}
			}
		}
		&.colored {
			.ab__mb_item {
				&:not(:last-child) {
					margin-bottom: 1px;
				}
			}
		}
	}
	&.framed {
		&:not(.colored) .ab__mb_item {
			border: 1px solid @base5;
		}
		&.colored .ab__mb_item {
			box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
		}
	}
	&.colored {

	}
}