@use '../../../scss/base/mixins' as *;
@use '../../../scss/base/variables';

.container {
  position: relative;
}

.background {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 5px;
  height: 100%;
  &.purple {
    background: var(--medium-purple);
  }
  &.yellow {
    background: var(--medium-yellow);
  }
  &.blue {
    background: var(--medium-blue);
  }
  &.red {
    background: var(--medium-red);
  }
}

.activeBar {
  height: 48px;
  width: 5px;
  position: absolute;
  transition: 0.5s top ease-in-out;
  left: 0;
  z-index: 99;
  border-radius: 100px;
  &.purple {
    background: var(--dark-purple);
  }
  &.yellow {
    background: var(--dark-yellow);
  }
  &.blue {
    background: var(--dark-blue);
  }
  &.red {
    background: var(--dark-red);
  }
}