// File Organization
// Measures have been taken to organize layout as follows:
// Abstracts / -  SASS functions, breakpoints and variables
@import "abstracts/variables";
@import "abstracts/breakpoints";
// Bootstrap / -  bootstrap node modules for overwriting classes, colors, functions and mixins
@import "base/bootstrap/scss/bootstrap";
@import "abstracts/mixins";
// Base / -  Base helpers and elements styles such as plugins, reset and animations.
@import "base/slick";
@import "base/slick-theme";
@import "base/body";
@import "base/reset";
@import "base/pushy";
@import "base/fish";
// Animate / -  import required file for animations
@import "base/animate/animate";
// Hamburger / -  import required file for hamburger
@import "base/hamburgers/hamburgers";

// -----------------------------------------

@font-face {
  font-family: 'light';
  src: url(../fonts/light.woff2) format('woff2');
}

@font-face {
  font-family: 'yalda';
  src: url(../fonts/yalda.woff2) format('woff2');
}

/* ====== Generally ====== */

.lazy {
  background: url(../../assets/images/misc/loading.svg) no-repeat center center;
  width: auto;
  display: block;
  margin: 2.5em auto;
}

.yalda {
  font-family: yalda, sans-serif;
}

/* ====== Header ====== */

/* ------------------------
   Header /- Navigation
------------------------*/

.header-area {
  @include transition(0.3s);

  .main-menu {
    .navbar-nav {
      .nav-item {
        position: relative;
        float: right;

        &.active {
          .nav-link {
            color: darken($danger, 1%);
          }
        }

        .nav-link {
          .badge {
            @include abs-pos(-0.15rem, 0, inherit, 0);
            padding: 0.15rem 0.5rem;
            text-align: center;
            margin: auto;
            width: 35px;
            @include font-size(5.5);
            font-weight: 300;
          }
        }
      }
    }
  }

}

.header-transparent {
  @include abs-pos(0, 0, inherit, 0);
  z-index: 9;
  @include transition(0.3s);
  @include font-size(8);
}

.nav-link {
  @include links($dark, default, darken($danger, 1%), darken($danger, 1%));
  @include line-height(25);
}

/* ====== Intro ====== */
/* ------------------------
   Intro /- Intro Area
------------------------*/

.intro-area {
  position: relative;

  & .intro-hero {
    z-index: 1;

    & .hero-text {
      position: relative;

      .hero-title {
        font-size: 6.8vw;
        color: #ff2958;
      }

      .hero-disc {
        @include line-height(14);
        font-size: 1.15rem;
      }

    }

  }

  & #landing-canvas {
    transform: rotate(180deg);
  }

  & .intro-background {
    background-image: url(../../assets/images/misc/background2.png);
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
  }
}

/* ====== Products ====== */
/* ------------------------
   Products /- Featured Area
------------------------*/

.featured-area {
  background-image: url(../../assets/images/misc/background-4.png);
  background-repeat: no-repeat;
  background-position: top left;

  & .product-wrapper {
    & .featured-promote {
      & img {
        @include border-radius(10px);
      }
    }

    & .product {

      & .product-inner {
        position: relative;
        overflow: hidden;
        @include border-radius(10px);

        & .badge {
          background-color: #ff6060;
          @include font-size(7);
          font-weight: 300;
          border: unset;
        }

        & .product-title {
          @include font-size(7);
          @include line-height(11);
          min-height: 5rem;

          a {
            @include links($dark, default, darken($danger, 1%), darken($danger, 1%));
          }

        }

        & .product-price {
          @include font-size(7);

          ins {
            text-decoration: none;
            color: #555;
            font-weight: 700;
            width: 50%;
          }

          del {
            text-decoration: line-through;
            color: #aaa;
            width: 50%;
          }
        }

        & .product-actions {
          background-color: $white;
          @include abs-pos(inherit, 0, 0, 0);
          padding: 1rem;
          width: 100%;
          opacity: 0;
          visibility: hidden;
          @include border-radius(0 0 10px 10px);
          @include transition(all 0.3s ease-in-out);
          transform: translateY(2rem);
          border-top: 1px solid #f6f6f6;

          & a {
            text-align: center;
            @include font-size(6.5);
            width: 50%;
            border-right: 1px solid #eee;
            position: relative;
            @include links($dark, default, darken($danger, 1%), darken($danger, 1%));

            & i {
              position: relative;
              right: -0.25rem;
            }

            &:first-child {
              border: unset;
            }
          }
        }

        &:hover {
          .product-actions {
            opacity: 1;
            visibility: visible;
            @include transition(all 0.3s ease-in-out);
            transform: translateY(0);

            & a {
              text-align: center;
              @include font-size(6.5);
              width: 50%;
              border-right: 1px solid #eee;
              position: relative;
              @include links($dark, default, darken($danger, 1%), darken($danger, 1%));

              & i {
                position: relative;
                right: -0.25rem;
              }

              &:first-child {
                border: unset;
              }
            }
          }

          @extend .shadow-lg;
        }
      }
    }
  }
}

/* ====== Products ====== */
/* ------------------------
   Products /- Sale Area
------------------------*/

.onsale-area {
  background-color: $gray-200;
  background-image: url(../../assets/images/misc/background-3.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  -webkit-background-size: cover;
  background-size: cover;


  .onsale-products-carousel {
    .product {
      background-color: #fff;
      @include border-radius(10px);
      position: relative;
      overflow: hidden;

      .product-title {
        text-overflow: ellipsis;
        @include line-height(12);
        @include font-size(8);
        min-height: 5rem;
        overflow: hidden;

        a {
          @include links($dark, default, darken($danger, 1%), darken($danger, 1%));
        }
      }

      .badge {
        background-color: #ff6060;
        @include font-size(8);
        font-weight: 300;
        border: unset;
        z-index: 1001;
        left: 2rem;
        bottom: 2rem;
      }

      .product-price {
        @include font-size(10);

        ins {
          text-decoration: none;
          color: #555;
          font-weight: 700;
          width: 50%;
        }

        del {
          text-decoration: line-through;
          color: #aaa;
          width: 50%;
        }
      }

    }
  }
}

/* ====== Coupon ====== */
/* ------------------------
   Coupon /- Coupon
------------------------*/

.coupon-area {

  & .coupon-card {
    @include border-radius(10px);
  }

  & .coupon-promote {
    & img {
      @include border-radius(10px);
    }
  }
}

/* ====== Misc ====== */
/* ------------------------
   Misc /- Misc Area
------------------------*/

.misc-area {
  @extend .position-relative, .text-danger;

  .feature-block {
    color: $dark;
    overflow: hidden;
    position: relative;

    .features-title {
      padding: 1.25rem 1.25rem 0 0;
      @extend .text-black-50, .w900;

      span {
        display: block;
        @include font-size(6);
        color: $dark;
        @extend .py-3;
      }
    }

    .features-icon {
      padding: .75rem 0 0 1rem;
      vertical-align: middle;
      border-left: 1px solid #f1f1f1;

      & img {
        width: 38px;
        height: 38px;
      }
    }


  }
}

/* ====== Footer ====== */
/* ------------------------
   Footer /- Footer
------------------------*/

.footer {
  background-color: $gray-100;
  position: relative;

  .our-copy-right {
    @include font-size(11);
    color: #aaa;
  }

  .our-social-accounts {
    @include font-size(10);

    a {
      display: inline-flex;
      @include links(#bbb, default, darken(#661ac7, 5%), darken(#661ac7, 5%));
    }
  }
}
