// Global Variables

// import global colors
@import './colors.less';

// width
@pcMaxWidth: 1288px;
@containerMaxWidth: 1520px;
@primaryBtnWidth: 7.5rem;
@primaryBtnWidth-en: 9rem;

// height
@primaryBtnHeight: 2.5rem;
@navHeight: 2rem;
@headerHeight: calc(~"1rem + @{navHeight} + 3px");
@pcFooterHeight: 400px;

// box
@boxSize: border-box;

//padding
@verticalPadding: 4rem;
@horizontalPadding: 12px;

// font
@regularFontSize: 16px;
@largeFontSize: 18px;
@smallRemSize: @regularFontSize;
@regularRemSize: @largeFontSize;
@largeRemSize: 20px;
@superRemSize: 22px;
@heroSTitleSize: 32px;
@heroLTitleSize: 48px;

// card
@cardBoxShadow: rgba(0, 0, 0, 0.1) 0 10px 20px -2px;
@cardHoverBoxShadow: 0 2px 10px rgba(0,0,0,.1),0 10px 40px -20px;

// border-radius
.rounded-corners (@radius: 3px) {
  border-radius: @radius;
}
// hover effects
.hover (@color: fade(white, 70%)) {
  color: @color;
}

// animations
.customAnimation (@animationAttrs) {
  animation: @animationAttrs;
}

// fadeIn
@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

//fadeInUp
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(1em);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

// fadeInDown
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}