//
// Variables and Mixins
//
@import "../unify/unify";

/* Typography */
body {
  @include px-to-rem("font-size", 13px);
  color: $g-theme-color-gray-dark-v1;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  color: $g-theme-color-gray-dark-v2;
}

/* Hamburger */
.hamburger {
  padding: 0;
}

.hamburger-box,
.hamburger-inner,
.hamburger-inner::after,
.hamburger-inner::before {
  width: 25px;
}

.hamburger-box {
  height: 17px;
}

.hamburger--slider .hamburger-inner {
  top: 0;
}

.hamburger--slider .hamburger-inner:before {
  top: 9px;
}

.hamburger--slider .hamburger-inner:after {
  top: 17px;
}

.hamburger--slider.is-active .hamburger-inner:after {
  transform: translate3d(0, -17px, 0) rotate(-90deg);
}

/* Main navigation */
.navbar-nav {
  .nav-item .nav-link {
    color: $g-theme-color-gray-dark-v2;
  }

  .nav-item .nav-link:hover,
  .nav-item.active .nav-link {
    color: $g-color-primary;
  }
}

/* Colors */
.g-theme-color-gray-dark-v2 {
  color: $g-theme-color-gray-dark-v2;
}

/* Background */
.g-theme-bg-primary-dark-v1 {
  background-color: $g-theme-color-primary-dark-v1 !important;

  .u-block-hover:hover &--hover,
  &--hover:hover,
  &--active.cbp-filter-item-active {
    background-color: $g-theme-color-primary-dark-v1 !important;
  }
}

.g-theme-bg-gray-light-v2 {
  background-color: $g-theme-color-gray-light-v2;
}

.g-theme-bg-gray-light-v4 {
  background-color: $g-theme-color-gray-light-v4;
}

.g-parent:hover {
  .g-bg-primary {
    &--parent-hover {
      background-color: $g-color-primary !important;
    }
  }
}

/* Border */
.g-theme-brd-gray-light-v1 {
  border-color: $g-theme-color-gray-light-v1 !important;

  &--before::before {
    border-color: $g-theme-color-gray-light-v1 !important;
  }
}

/* Box shadow */
.u-theme-shadow-v1 {
  box-shadow: inset 2px 2px 2px $g-theme-color-primary-dark-v2;
}

@media (min-width: 768px) {
  [class*="u-nav-v2"].u-nav-primary .nav-link {
    font-weight: 700;
    color: $g-theme-color-gray-dark-v1;
    border-color: $g-theme-color-gray-light-v1;
  }

  [class*="u-nav-v2"].u-nav-primary .nav-link.active {
    border-color: $g-color-primary !important;
  }

  .u-nav-v2-1.u-nav-primary .nav-link.active {
    background-color: $g-color-primary;
  }
}

/* Carousel */
.u-carousel-indicators-v1 span {
  background-color: $g-theme-color-gray-light-v3;
}

.u-carousel-indicators-v1 li.slick-active span {
  background-color: rgba($g-color-primary, .6);
}

/* Master Slider */
.ms-thumb-list {
  display: none;
  height: auto !important;
}

.ms-thumbs-cont {
  display: flex;
  width: auto !important;
}

.ms-tabs .ms-thumb-frame {
  height: 52px !important;
  background: $g-color-primary;
  border: none;
  margin: 0 !important;
}

.ms-tabs .ms-thumb {
  color: $g-color-white;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  text-align: center;
  text-shadow: none;
  background: $g-color-primary;
  padding: 17px 20px;
  transition: all 0.3s;
}

.ms-thumb-frame-selected .ms-thumb,
.ms-tabs .ms-thumb:hover {
  background: $g-theme-color-primary-dark-v3;
}

.ms-tabs .ms-thumb-frame-selected {
  background: $g-theme-color-primary-dark-v3;
  padding: 10px 0;
}

.ms-promo-1 .ms-thumb-frame-selected:after,
.ms-promo-1 .ms-thumb-frame:before,
.ms-thumb-ol {
  display: none;
}

.ms-anim-layers {
  position: relative;
  top: 50%;
  padding: 0 15px;
  margin: 0 auto;
  transform: translateY(-50%);
}

@media (min-width: $g-sm) {
  .ms-anim-layers {
    width: 750px;
  }
}

@media (min-width: $g-md) {
  .ms-thumb-list {
    display: block;
  }

  .ms-anim-layers {
    width: 970px;
  }
}

@media (min-width: $g-lg) {
  .ms-anim-layers {
    width: 1170px;
  }
}

.ms-layer {
  top: 0 !important;
}

.ms-slide-bgcont {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba($g-color-black, .3);
  }
}

/* Cube portfolio */
.cbp-caption-fadeIn .cbp-caption-activeWrap {
  background-color: rgba($g-color-primary, .9);
}

/* Master slider */
.ms-thumb-list {
  overflow: visible;
}