/**
 * Tabs
 *
 * Styling of the Tab controls
 *
 * @package    jCLib
 * @author     Neonfire Development <webmaster@neonfire.co.za>
 * @copyright  2022-2023 Neonfire Development
 * @version    1.00.01
 */

/*
	NOTE: The base styles determine behaviour on a small device
*/

/* Wrapping container */
.jc-tabset-container {
	position: relative;
	border: 1px #333 solid;
	overflow: auto;
}

/* Tabs */
ul.jc-tabset {
	padding: 0;
	margin: 0;
}
ul.jc-tabset > li {
	list-style: none;
	position: relative;
}

/* Tab refresh button */
.jc-accordian-tab-refresh-button {
	/*float: right;*/
	position: absolute;
	top: 8px;
	right: 8px;
}

.jc-tab-refresh-button {
	position: absolute;
	top: 10px;
	right: 10px;
}

/* Tab link */
ul.jc-tabset > li > a {
	display: block;
	padding: 10px 15px;
	background: #ccc;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #999;
	text-decoration: none;
	color: #000;
}

ul.jc-tabset > li > a:hover {
	background: #B3B3B3;
	color: #F2F2F2;
}
ul.jc-tabset > li > a.jc-tab-active {
	background: #B3B3B3;
	color: #F2F2F2;
}

/* Tab content */
ul.jc-tabset > li > section {
	display: none;
	background: #fff;
	padding: 12px 20px;
	width: 100%;
	overflow: auto;
}

ul.jc-tabset > li:last-child > section {
	margin-bottom: 0;
}

/* Styling amendments for wider screens */
@media only screen and (min-width: 30em) {
	.jc-tabset-container {
		border: 1px #333 solid;
		overflow: auto;
		border-radius: 8px;
		background: #666;
	}

	ul.jc-tabset {
		position: relative;
		border: none;
		margin-top: 4px;
	}
	ul.jc-tabset > li {
		display: inline;
		position: static;
	}
	ul.jc-tabset > li:first-child {
		margin-left: 4px;
	}
	ul.jc-tabset > li > a {
		display: inline-block;
		border: none;
		border-radius: 8px 8px 0 0;
	}

	ul.jc-tabset > li > a.jc-tab-active {
		color: #000;
		background: #fff;
	}

	ul.jc-tabset > li > section {
		float: left;
		margin-bottom: 0;
	}

	.jc-accordian-tab-refresh-button {
		top: 5px;
	}
}