/*******************************************************************************************
*   ___  _          ______                     _ _                _                        *
*  / _ \| |         | ___ \                   | (_)              | |              © 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-horizontal {
	&-tabs-wrap {
		overflow: hidden;
		max-width: 100%;
	}
    &__item {
        &:not(.active) {
            display: none;
        }
        &-tab {
			position: relative;
            cursor: pointer;
			flex: 0 0 auto;

            > div {
	            display: flex;
			    align-items: center;
			    min-height: 40px;
            }
            span {
                display: none;
                font-weight: 600;
				line-height: 1;
                font-size: var(--font-size-normal);
				color: fade(@font, 85%);
				-webkit-transition: all 150ms;
				transition: all 150ms;
            }
            &.has-icon {
                span {
                    display: none;
                }
            }
            i, img {
	            font-size: @mb_item_icon_size;
            }
			.ty-pict {
	            width: @mb_item_icon_size;
	            height: auto;
	            max-height: @mb_item_icon_size;
	        }
            &.active, &:not(.has-icon) {
                span {
                    display: inline-block;
                }
                i, img {
	                margin-right: 7px;
                }
            }
			&.active, &:hover {
				span {
					color: @font;
				}
			}
        }
    }
    &-tabs {
	    display: flex;
		overflow-y: hidden;
		overflow-x: auto;
		margin-bottom: -1px;

		&::-webkit-scrollbar {
			height: 4px;
		}
		&::-webkit-scrollbar-track {
			background: var(--ab-mb-bg-color);
			border-radius: 0;
			margin-left: 1px;
		}
		&::-webkit-scrollbar-thumb {
			border-radius: 0px;
			background: rgba(0,0,0,.1);

			&:hover {
				background: rgba(0,0,0,.2);
			}
		}
		.ut2_rounding_blocks_enable() when (@abt__ut2_general_use_rounding_blocks = true) {
			.ut2_round(@round: 6px 6px 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();
    }
    &-content {
	    padding: @pdi 0;
		min-height: 175px;
	    
	    .ab__mb_item-description.ty-wysiwyg-content ul {
		    margin: inherit;
	    }
	    li {
		    padding: 0;
	    }
    }
}

.ab__horizontal_tabs {
	.ab__mb_items {
		.ab-mb-horizontal__item-tab {
			padding: 0 @pdi;
			background-color: var(--ab-mb-bg-color);

			&.active {
				z-index: 2;
			}
			&:not(.active) {
				box-shadow: inset 0 0 0 300px rgba(0,0,0,0.05);
			}
		}
		.ab-mb-horizontal-content {
			background-color: var(--ab-mb-bg-color);

			.ut2_rounding_blocks_enable() when (@abt__ut2_general_use_rounding_blocks = true) {
				.ut2_round(@round: 0 0 6px 6px) 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();
		}
		&.framed {
			&:not(.colored) {
				.ab-mb-horizontal-tabs {
					background-color: lighten(@base, 3%);
					border: 1px solid @base5;
					border-bottom: 0;
				}
				.ab-mb-horizontal__item-tab {
					padding: 3px @pdi;
					border: 1px solid transparent;
					box-shadow: none;

					&.active {
						border-width: 0 1px 0 0;
						border-right-color: @base5;
						background-color: @general_bg_color;

						&:before {
							content: "";
							position: absolute;
							display: block;
							height: 3px;
							width: calc(~'100% - '(@pdi*2));
							left: @pdi;
							right: 0;
							bottom: 0;
							background: @primary_button;

							.ut2_round(@round: 3px 3px 0 0) when (@abt__ut2_general_use_rounding = little) {
								.border-radius(@round);
							}
							.ut2_round(@round: 3px 3px 0 0) when (@abt__ut2_general_use_rounding = full) {
								.border-radius(@round);
							}
							.ut2_round();
						}
					}
					&:not(.active) {
						border-color: @base5;
						border-top: 0;
						border-left: 0;
					}
				}
				.ab-mb-horizontal-content {
					border: 1px solid @base5;
				}
			}
			&.colored {
				.ab-mb-horizontal-tabs {
					margin: 0 -1px -1px -1px;
					width: calc(~'100% + 1px');
				}
				.ab-mb-horizontal__item-tab {
					margin: 0 1px -1px;

					.ut2_rounding_blocks_enable() when (@abt__ut2_general_use_rounding_blocks = true) {
						.ut2_round(@round: 6px 6px 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();

					&:not(.active) {
						box-shadow: none;
						background-color: lighten(@base, 3%);
						margin-bottom: 1px;
					}
					&.active {
						box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
					}
				}
				.ab-mb-horizontal-content {
					box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
				}
			}
		}
		&.fill {
			.ab-mb-horizontal__item-tab {
				padding: 3px @pdi;
				margin-right: 2px;
				border: 0;

				&:first-child {
					.ut2_rounding_blocks_enable() when (@abt__ut2_general_use_rounding_blocks = true) {
						.ut2_round(@round: 6px 0 0 0) when (@abt__ut2_general_use_rounding = little) {
							.border-radius(@round);
						}
						.ut2_round(@round: 12px 0 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 6px 0 0) when (@abt__ut2_general_use_rounding = little) {
							.border-radius(@round);
						}
						.ut2_round(@round: 0 12px 0 0) when (@abt__ut2_general_use_rounding = full) {
							.border-radius(@round);
						}
						.ut2_round();
					}
					.ut2_rounding_blocks_enable();
				}
				&:not(.active) {
					box-shadow: none;
					background-color: lighten(@base, 3%);
					margin-bottom: 1px;
				}
				&.active {
					border-bottom: 0;
					border-right-color: @base5;

					&:not(:first-child) {
						border-left: 0;
					}
				}
			}
			&:not(.colored) {
				.ab-mb-horizontal-tabs{
					position: relative;

					&:after {
						content: "";
						position: absolute;
						bottom: 0;
						display: block;
						width: 100%;
						border-bottom: 1px solid @base5;
					}
				}
				.ab-mb-horizontal__item-tab {
					background-color: transparent;

					&.active:before {
						content: "";
						position: absolute;
						display: block;
						height: 3px;
						width: calc(~'100% -'(@pdi*2 - 10));
						margin-left: -5px;
						bottom: 0;
						background: @primary_button;

						.ut2_round(@round: 3px 3px 0 0) when not (@abt__ut2_general_use_rounding = none) {
							.border-radius(@round);
						}
						.ut2_round();
					}
				}
			}
		}
	}
}
