* {
  all: unset; // Unsets everything so you can style everything from scratch
  font-family: "FiraCode Nerd Font";
}

// Global Styles

@import "mocha.scss";

.bar {
  background-color: $mantle;
  color: $text;
}

// Workspace Styles

$colors: $rosewater, $flamingo, $pink, $mauve, $red, $maroon, $peach, $yellow, $green, $teal;

.workspace {

  @for $i from 1 through 10 {
    &.entry-#{$i} {
      .text {
        padding: 0 5px;
        color: $crust;
        background-color: mix(nth($colors, $i), #4E4365, 30%);

        &.active {
          background-color: mix(nth($colors, $i), #4E4365, 100%);
        }

        &.empty {
          color: transparent;
        }
      }

      .seperator {
        font-size: 19px;
        margin-top: -1px;

        &.up {
          color: mix(nth($colors, $i), #4E4365, 30%);
        }

        &.up.active {
          color: mix(nth($colors, $i), #4E4365, 100%);
        }

        &.down {
          margin-left: -12px;
          margin-right: -1px;

          @if $i ==10 {
            color: transparent;
          }

          @else {
            &.active {
              color: mix(nth($colors, $i + 1), #4E4365, 100%);
            }

            color: mix(nth($colors, $i + 1), #4E4365, 30%);
          }
        }
      }
    }
  }
}

// Styles on classes (see eww.yuck for more information)

.sidestuff slider {
  all: unset;
}

.metric scale trough highlight {
  all: unset;
  background-color: $blue;
  border-radius: 10px;
}

.metric scale trough {
  all: unset;
  border-radius: 50px;
  min-height: 3px;
  min-width: 50px;
  margin-left: 10px;
  margin-right: 20px;
}

.metric scale trough highlight {
  all: unset;
  background-color: #5d96d3;
  color: #000000;
  border-radius: 10px;
}

.metric scale trough {
  all: unset;
  background-color: $surface0;
  border-radius: 50px;
  min-height: 3px;
  min-width: 50px;
  margin-left: 10px;
  margin-right: 20px;
}