//
// T4 Components
// ---------------------------------------------

//
// Banners
.t4-banner {
  text-align: center;
  background: $gray-100;
}

// T4 Height Define
@each $t4-nav-height-size, $value in $t4-nav-height-size {
	.t4-nav-height-#{$t4-nav-height-size} {
		.t4-megamenu {
			.navbar-nav > li > a,
			.navbar-nav > li > .nav-link {
				height: $value;
	      line-height: $value - ($t4-nav-link-padding-y * 2);
	    }
		}
	}
}

// Align Main Menu
.nav-align-left {
  .t4-megamenu .navbar-nav > li {
    > a,
    > span {
      padding-left: 0;
      padding-right: 0;
      margin-right: $t4-nav-link-padding-x * 2;
    }
  }

  // Menu Toggle
  .navbar-toggler,
  .t4-offcanvas-toggle {
    margin-right: $spacer;
  }
}

// Element Toggle Dark/Light
.ja-dark-mode {
	align-items: center;
	cursor: pointer;
	display: flex;
	line-height: 1;
}

.svg-light,
.svg-dark {
	fill: var(--body-text-color);
}

.dark-mode-status {
	background: var(--tpl-base-200);
	border-radius: 32px;
	position: relative;
	margin: 2px 6px 0;
	height: 16px;
	width: 32px;

	span {
		background: var(--tpl-base-300);
		border-radius: 50%;
		position: absolute;
		left: 3px;
		top: 3px;
		height: 10px;
		width: 10px;
		transition: 500ms all;
	}
}

// Active Dark
.dark-active {
	.dark-mode-status {
		span {
			left: 19px;
		}
	}

	.mode-light {
		opacity: 0.2;
	}
}

// Owl Plugin Global Style
// --------------------------
div.owl-carousel {
	// Nav
	div.owl-nav {
		text-align: center;
		margin-top: $grid-gutter-width;

		// Mobile view
		@include media-breakpoint-down(md) {
			margin-top: $grid-gutter-width / 2;
		}

		> button {
			&.owl-prev,
			&.owl-next {
				border: 1px solid var(--tpl-base-200);
				border-radius: 50%;
				line-height: 46px;
				margin: 0 $grid-gutter-width / 4;
				font-size: 20px;
				height: 48px;
				width: 48px;

				// Mobile view
				@include media-breakpoint-down(md) {
					line-height: 34px;
					height: 36px;
					width: 36px;
				}

				&:hover,&:focus,&:active {
					background: var(--tpl-base-200);
				}
			}
			
		}
	}

	// Dot
	.owl-dots {
    display: flex;
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: $spacer;
    gap: .5rem;

    .owl-dot {
      &.active {
        span {
					background-color: var(--t4-primary);
          opacity: 1;
          width: 16px;
        }
      }
    }

    span {
      background-color: var(--body-text-color);
      border-radius: 12px;
      display: block;
      height: 10px;
      opacity: .5;
      transition: $transition-base;
      width: 10px;
    }
  }
}

//
// Bootstraps Components
// ---------------------------------------------

// Remove space container in container
.container {
	.container,
	.container-xxl {
		padding-left: 0;
		padding-right: 0;
	}
}

// Gutters Vertical
.v-gutters {
	margin-top: -$grid-gutter-width / 2;
	margin-bottom: -$grid-gutter-width / 2;

	> div {
		padding-top: $grid-gutter-width / 2;
		padding-bottom: $grid-gutter-width / 2;
	}
}

// Button on Header
.navbar-nav {
	// Button Color
	.btn-primary {
		color: $white!important;
	}

	// Button Normal
	.btn {
		padding: $btn-padding-y $btn-padding-x!important;
	}

	// Button SM
	.btn-sm {
		padding: $btn-padding-y-sm $btn-padding-x-sm !important;
	}

	// Button SM
	.btn-lg {
		padding: $btn-padding-y-lg $btn-padding-x-lg !important;
	}
}

// Class for collapse Menu
.collapse-flex {
  display: none;
}

@each $breakpoint in map-keys($grid-breakpoints) {
  .nav-breakpoint {
    &#{"-"}#{$breakpoint} {
      @include media-breakpoint-down($breakpoint) {
        .collapse-flex {
        	display: flex;
        }

        .collapse-space-between {
        	justify-content: space-between !important;
        }

        .collapse-border-0 {
        	border: 0 !important;
        }
      }
    }
  }
}

// Resize spacer on mobile
.mt-5 {
	@include media-breakpoint-down(sm) {
		margin-top: $spacer * 1.5!important;
	}
}

.mb-5 {
	@include media-breakpoint-down(sm) {
		margin-bottom: $spacer * 1.5!important;
	}
}