.sm_tabs{
	margin: 0;
	@include flex_mixin(flex, null, end, null, null);	
	margin-bottom: calculateRem(15px);
    gap: 15px;
	flex-wrap: wrap;
	max-width: 15rem;
	padding: 3rem 0;
	&-link {
		width: 100%;
		& a {
			@include flex_mixin(flex, flex-start, center, null, calculateRem(10px));
			background-color: transparent;
			border: 1px solid var(--sm-sidebar-border-color);
			@include fontSize(14px);
			font-weight: 600;
			text-transform: uppercase;
			min-width: calculateRem(80px);
			color: var(--smd-primary-color);
			transition: $transition-all;
			margin-bottom: 0;
			border-radius: calculateRem(8px);
			cursor: pointer;
			padding: calculateRem(14px) calculateRem(24px);
			text-decoration: none;
			& svg {
				& path, & circle {
					fill: var(--sm-primary-color);
				}
			}

			&:focus {
				box-shadow: none !important;
				outline: none !important;
			}

		}

		&.current{
			//margin: 0;
			& a {
				background-color: var(--sm-primary-color);
				color: var(--sm-base-white-color);
				//box-shadow: rgba($primary-color, 0.40) 0px calculateRem(6px) calculateRem(20px) 0px;
				border-color: var(--smd-primary-color);
			}
			& svg {
				& path, & circle {
					fill: var(--sm-base-white-color);
				}
			}
			&:hover {
				color: var(--sm-base-white-color);
				& svg {
					& path, & circle {
						fill: var(--sm-base-white-color);
					}
				}
			}
		}

		&:hover {
			color: var(--sm-primary-color);
			& svg {
			  & path, & circle {
				fill: var(--sm-primary-color);
			  }
			}
		}
	  
		&:focus {
			@include box-shadow();
			outline: none;
		}
	}	
	& span.menu_icon {
		width: calculateRem(18px);
		height: calculateRem(18px);
		& svg {
			width: 100%;
			height: 100%;
		}
	}
}

.tab-content{
	display: none;
	flex: 1;
	padding: 3rem 0;
	&.current{
		display: inherit;
		border-radius: calculateRem(8px);    	
	}
}

.smd-tab-content .sm_tabs {
	max-width: 15rem;
}


@media screen and (max-width: 767px) {

	.sm_tabs {
		margin: 0;
		padding: 0;
		gap: 0;
		max-width: 100% !important;
	}
	.sm_tabs-link {
		padding: 0;
		margin: 0;
		width: calc(100% / 5) !important;
		& a {
			padding: 0.5rem !important;
			justify-content: center;
			min-width: fit-content;
			border-radius: 0 !important;
		}
		&.current {
			& a {
				min-width: fit-content;
				border-radius: 0 !important;
			}
		}
	}
	.menu_label {
		display: none;
	}
	& .sm_tabs span.menu_icon {
		font-size: 1.2rem;
	}
	& .tab-content.current {
		padding: 0;
		border-radius: 0;
	}
	& .smd-tab-content {
		padding: 2rem 0;
		& .submit_button {
			margin-bottom: 0 !important;
		}
	}
}