@import 'css/colors';

@mixin rounding {
  border-radius: $border-radius;
}

@mixin window {
  border: $border-width solid $base04;
  margin: $gaps-screen $gaps-screen $gaps-screen;
  @include rounding;
}

@import 'css/sys';
@import 'css/net';
@import 'css/clock';
@import 'css/radio';
@import 'css/powermenu';

* {
  all: unset;
  font-family: "IBM Plex Mono";
  transition: 200ms ease;
}

.bar {
  color: $fg;

  label {
    font-size: 1.2rem;
  }
}

tooltip {
  background: $base01;
  border: $border-width solid $base04;
  border-radius: $border-radius;

  label {
    font-size: 1rem;
  }
}

.icon,
.icon label { font-family: Material Design Icons; }

.ws {
  border-radius: $border-radius;
  margin: $gaps-window;
}

.focused {
  background-color: $bg1;
  border-radius: 1rem;
  margin: .3rem;
  padding: .25rem;
}

.module {
  background: $base01;
  border-radius: $border-radius;
  border-color: $base03;
  border-style: solid;
  border-width: $border-width;
  border-right-style: none;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  padding: $gaps-screen $gaps-window;
  margin: $gaps-screen 0;
}



.grey {
  background-color: $base02;
}

.red {
  background-color: $base0F;
}

.orange {
  background-color: $base08;
}

.green {
  background-color: $base0B;
}

.blue {
  background-color: $base0C;
}