floorSelector.scss

@use "sass:math";
@import "../../../../css/variables.scss";
@import "../../../../css/mixins.scss";

$transition-time: 0.5s;

.floor-selector {
  pointer-events: all;

  .level {
    font-family: 'Roboto Condensed', sans-serif; // import font!
    cursor: pointer;
    list-style: none;
    display: block;
    pointer-events: all;
    width: 100%;
    font-size: $floorSelectorLevelFontSize;
    text-align: right;
    @include transition(all $transition-time);
    margin-left: 200px;

    &:hover {
      font-size: $floorSelectorLevelOverFontSize;
    }

    &:first-child {
      margin-top: -$floorSelectorLevelFontSize - 15px;
    }

    &.active {
      font-size: $floorSelectorLevelActiveFontSize;
      margin-top: math.div(-$floorSelectorLevelActiveFontSize, 2) + 15px;
      margin-bottom: math.div(-$floorSelectorLevelActiveFontSize, 2) + 15px;
      color: #F6A803;
      text-transform: uppercase;
      pointer-events: all;

      &:first-child {
        margin-top: -$floorSelectorLevelActiveFontSize + 10px;
      }
    }
  }
}

.active .floor-selector {
  .level {
    margin-left: 0;

    &.active {
      margin-left: 15px;
    }
  }

  .level:nth-child(1) {
      @include transition(all $transition-time, margin-left 0.8s 0.1s);
  }

  .level:nth-child(2) {
      @include transition(all $transition-time, margin-left 0.8s 0.2s);
  }

  .level:nth-child(3) {
      @include transition(all $transition-time, margin-left 0.8s 0.3s);
  }

  .level:nth-child(4) {
      @include transition(all $transition-time, margin-left 0.8s 0.4s);
  }

  .level:nth-child(5) {
      @include transition(all $transition-time, margin-left 0.8s 0.5s);
  }

  .level:nth-child(6) {
      @include transition(all $transition-time, margin-left 0.8s 0.6s);
  }

  .level:nth-child(7) {
      @include transition(all $transition-time, margin-left 0.8s 0.7s);
  }

  .level:nth-child(8) {
      @include transition(all $transition-time, margin-left 0.8s 0.8s);
  }

  .level:nth-child(9) {
      @include transition(all $transition-time, margin-left 0.8s 0.9s);
  }
}