@import "colors";

* {
  all: unset;
}

.root {
  color: $foreground;
  font-family: "JetBrains Mono";
  font-size: 8.5pt;
  background-color: rgba(0, 0, 0, 0);
  // Probably needs to change
  &.bar {
    margin: 10px;
    margin-bottom: 0px;
  }

  &.side {
    margin: 10px;
    margin-right: 0px;
  }

  &.bg {
    background-color: $bg0;
    padding: 10px;
  }
}

.nebula {
  font-family: "Nebula";
  font-size: 1.2em;
  &.big,
  .big {
    font-size: 2em;
  }
  &.medium,
  .medium {
    font-size: 1.6em;

    &.small {
      font-size: 1.4em;
    }
  }
}

.icon {
  font-family: "Font Awesome 5 Free Solid";
}

.highlight {
  color: $red;
}

.offline {
  color: $bg1;
}

.special {
  color: $blue;
}

.green {
  color: $green;
}

.big {
  font-size: 12pt;
}

// sway module

.sway--ws {
  color: $bg1;

  &.sway--active {
    color: $foreground;
  }

  &.sway--visible {
    color: $blue;
  }

  &.sway--focused {
    .fill {
      background-color: $foreground;
    }
  }
}

// clock module

.clock--time {
  font-size: 20pt;
}

.clock--date {
  font-size: 9pt;
}