// Color variables
$color1: rgba(32, 152, 209, 1);
$color2: rgba(232, 241, 242, 1);
$color3: rgba(58, 68, 79, 1);
$color4: rgba(31, 47, 81, 1);
$color5: rgba(32, 36, 40, 1);
$color6: #23272B;

// Custom variables and variable overwrites
$global-color: $color2;
$global-primary-background: $color1;
$global-secondary-background: $color5;
$base-heading-color: $color1;

// Default variables and available mixins
@import "~uikit/src/scss/variables-theme.scss";
@import "~uikit/src/scss/mixins-theme.scss";

// Custom mixin overwrites

// Import UIkit
@import "~uikit/src/scss/uikit-theme.scss";

// Import Nprogress Bar
@import '~nprogress/nprogress.css';

// Import FontAwesome
@import url('https://pro.fontawesome.com/releases/v5.7.1/css/fontawesome.css');
@import url('https://pro.fontawesome.com/releases/v5.7.1/css/light.css');
@import url('https://pro.fontawesome.com/releases/v5.7.1/css/brands.css');

// Import SimpleBar
@import '~simplebar/dist/simplebar.css';

// Custom UIkit classes
.uk-text-white{
  color: $color2 !important;
}
.uk-background-lighter{
  background: $color3 !important;
}
.uk-background-transparent{
  background: transparent !important;
}

// Custom SCSS
#app{
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}
#content{
  background: url("assets/img/bg_bottom.png") no-repeat scroll bottom;
  transition: height .3s;
}
footer{
  padding-top: 100px;
  background: $color6;
}
.navbar-icon{
  font-size: 125%;
}

// Nprogress bar overwrites
#nprogress{
  .bar{
    background: #2098D1;
    height: 5px;
  }
}

// SimpleBar overwrites
.simplebar-scrollbar{
  right: 0px !important;
  width: 10px !important;
}
.simplebar-scrollbar:before{
  background: $color1 !important;
  border-radius: 0px !important;
}
.simplebar-track{
  .simplebar-scrollbar.simplebar-visible:before{
    /* When hovered, remove all transitions from drag handle */
    opacity: 1 !important;
  }
}
.simplebar-track.simplebar-vertical{
  .simplebar-scrollbar:before{
    top: 0px !important;
    bottom: 0px !important;
  }
}

// Vue animations
.fade-enter-active, .fade-leave-active {
  transition: opacity .2s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

// Vue router classes
.router-link-active{
  text-decoration: underline;
}