/*
# Notes:

	This file represents a component which we are calling "pills".
	It is an augmentation of the material tabs component. It's purpose is fitting for "navigation",
	which is why it's located inside of this navigation folder, instead of located in the layout folder.

*/

/*
.mat-card.sft-mat-card--royal-flush {
	padding: 0;
}
*/


/*
	There's two implementations of material's tabs:

		Tab way:
		mat-tab-group
			mat-tab-header
				mat-tab-label-container
					mat-tab-list
						mat-tab-labels
							mat-tab-label
								mat-tab-label-content

							
		Nav way:
			mat-tab-nav-bar mat-tab-header ( mat-tab-header is the same )
				mat-tab-link-container (same)
					mat-tab-list (same)
						mat-tab-links
							mat-tab-link


	*******************

	.mat-tab-group
		.mat-tab-header
			.mat-tab-label-container
				.mat-tab-list
					.mat-tab-labels
						.mat-tab-label
						.mat-tab-label-active

		.mat-tab-body-wrapper
			.mat-tab-body
				.mat-tab-body-content

*/



/* 
# Tab implementation */

	.mat-tab-group.sft-mat-tab-group--pills {

	}

	/*
	*/

	.mat-tab-group.sft-mat-tab-group--pills .mat-ripple-element {
		/* display: none !important; */
	}

	/*
	*/

		.sft-mat-tab-group--pills .mat-tab-labels {

		}
			.sft-mat-tab-group--pills .mat-tab-labels .mat-tab-label {
				height: 36px;
				border-radius: .25rem;

				background-color: var(--sft-transparent-black-0005);

				margin-left: .15rem;
				margin-right: .15rem;

				opacity: 1;
			}

			.sft-mat-tab-group--pills .mat-tab-labels .mat-tab-label-active {
				background-color: var(--sft-opaque-warm-primary-color-500) !important;
				opacity: 1;

				margin-left: .25rem;
				margin-right: .25rem;
			}

		/* */
			/*
			.sft-mat-tab-group--pills .mat-tab-label-active {
				
				opacity: 1;
			}
			*/
				.sft-mat-tab-group--pills .mat-tab-label-active > .mat-tab-label-content {
					color: var(--sft-transparent-white-0100);
				}

					/*
					.mat-tab-group.sft-mat-tab-group--pills.mat-accent.mat-background-accent .mat-tab-label-active {
						background-color: transparent !important;
					}

						.mat-tab-group.sft-mat-tab-group--pills.mat-accent.mat-background-accent .mat-tab-label > .mat-tab-label-content {
							color: #000000;
						}

						.mat-tab-group.sft-mat-tab-group--pills.mat-accent.mat-background-accent .mat-tab-label-active > .mat-tab-label-content {
							color: #000000;

						}
					*/

					.sft-mat-tab-group--pills.mat-primary.mat-background-primary .mat-tab-label-active,
					.mat-tab-group.sft-mat-tab-group--pills.mat-primary.mat-background-primary .mat-tab-label-active {
						background-color: transparent !important;

					}

						.mat-tab-group.sft-mat-tab-group--pills.mat-primary.mat-background-primary .mat-tab-label-active > .mat-tab-label-content {
							color: var(--sft-transparent-white-0100);
						}

				/*
				.mat-tab-group.sft-mat-tab-group--pills.mat-accent.mat-background-accent .mat-ink-bar {
					background-color: #000000;
				}
				*/

				.mat-tab-group.sft-mat-tab-group--pills.mat-primary.mat-background-primary .mat-ink-bar {

					/* display: none !important; */

				}

				.sft-mat-tab-group--pills .mat-ink-bar {
					display: none !important;
				}



/* 
# Nav implementation */

/* 

	mat-tab-nav-bar mat-tab-header ( mat-tab-header is the same )
		mat-tab-link-container (same)
			mat-tab-list (same)
				mat-tab-links
					mat-tab-link
*/

	.sft-mat-tab-nav-bar--pills .mat-tab-list .mat-tab-links {
		background-color: transparent;
	}


		.sft-mat-tab-nav-bar--pills .mat-tab-list .mat-tab-links .mat-tab-link {

			color: var(--sft-transparent-black-0080);
			height: 36px;
			border-radius: .25rem;

			background-color: var(--sft-transparent-black-0005);

			margin-left: .15rem;
			margin-right: .15rem;

			opacity: 1;
		}

		.sft-mat-tab-nav-bar--pills .mat-tab-list .mat-tab-links .mat-tab-link.mat-tab-label-active {
			background-color: var(--sft-opaque-warm-primary-color-500) !important;

			color: var(--sft-transparent-white-0100);
			
			opacity: 1;

			margin-left: .25rem;
			margin-right: .25rem;
		}
			
		
		.sft-mat-tab-nav-bar--pills .mat-ink-bar {
			display: none !important;
		}