@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.nice-bar {
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}
.nice-bar-rail-y {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  z-index: 100000;
}
.nice-bar-rail-x {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 6px;
  width: 100%;
  z-index: 100000;
}
.nice-bar-slider-y {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  z-index: 100001;
  opacity: 0;
  animation-duration: 1s;
  animation-fill-mode: both;
  &.fade-in {
    animation-name: fadeIn;
  }
  &.fade-out {
    animation-name: fadeOut;
  }
}
.nice-bar-slider-x {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 6px;
  z-index: 100001;
  opacity: 0;
  animation-duration: 1s;
  animation-fill-mode: both;
  &.fade-in {
    animation-name: fadeIn;
  }
  &.fade-out {
    animation-name: fadeOut;
  }
}
.theme-light {
  .nice-bar-slider-y {
    background: #aaa;
  }
  .nice-bar-slider-x {
    background: #aaa;
  }
}
.theme-dark {
  .nice-bar-slider-y {
    background: #222;
  }
  .nice-bar-slider-x {
    background: #222;
  }
}