/*
 * Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
 * wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
 */

%tabs-screen-md-min-details {
	> {
		details {
			border: {
				color: $tabpanel-border-color;
				style: $tabpanel-border-style;
				width: $tabpanel-border-width;
			}
			display: none;

			&[open] {
				display: block;

				> {
					summary {
						display: none !important;
					}
				}
			}
		}
	}
}

.wb-tabs {
	@extend %tabs-screen-md-min-details; /* Only for backwards compatibility. Should be removed in v4.1. */

	> {
		.tabpanels {
			@extend %tabs-screen-md-min-details;
		}
	}

	&.carousel-s2 {
		&.show-thumbs {
			[role="tablist"] {
				li {
					&.active {
						a {
							border: {
								color: $carousel-s2-tablist-thumbnail-active-border-color;
								style: $carousel-s2-tablist-thumbnail-active-border-style;
								width: $carousel-s2-tablist-thumbnail-active-border-width;
							}
							margin-bottom: 1px;
							padding: 0;

							&:focus {
								&::before {
									content: "";
									height: calc(100% - #{$carousel-tabpanel-outline-offset * 3});
									left: 0;
									margin: 2px;
									outline: inherit {
										color: #FFF;
									}
									position: absolute;
									top: 0;
									width: calc(100% - #{$carousel-tabpanel-outline-offset * 2});
								}
							}
						}
					}

					&[role="presentation"] {
						display: inline-block;

						img {
							opacity: .5;
							width: 140px;
						}
					}

					&[class="active"] {
						img {
							opacity: 1;
						}
					}

					&.prv,
					&.tab-count,
					&.nxt {
						display: none;
					}
				}
			}
		}
	}
}