@import 'css/colors';

/* MIXIN */

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

@mixin border-inactive {
  border-width: $border-width;
  border-style: solid;
  border-color: $base03;
}

@mixin border-active {
  border-width: $border-width;
  border-style: solid;
  border-color: $base04;
}

@mixin test {

}

/*  GENERAL */

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

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

  label {
    font-size: 1rem;
  }
}

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

.icon-text {
  padding: 4pt;
  font-size: 6pt;
  font-weight: 900;
}

.grey {
  color: $base02;
}

.red {
  color: $base0F;
}

.orange {
  color: $base08;
}

.green {
  color: $base0B;
}

.blue {
  color: $base0C;
}

/* WINDOW WRAPPER CSS */

.winevent {
  background-color: $base01;
  color: $base07;
  @include border-radius;
  @include border-inactive;
}
.winevent:hover {
  @include border-active;
}

.wininner {
  padding: $gaps-window;
}
.winouter {
  margin: $gaps-screen;
}

/* MODULE WRAPPER CSS */

.modevent {
  background-color: $base01;
  color: $base07;
  @include border-radius;
  @include border-inactive;
  border-right-style: none;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.modevent:hover {
  @include border-active;
}

.modinner {
  padding: $gaps-screen 0 $gaps-screen $gaps-window;
}
.modouter {
  margin: $gaps-screen 0;
}

/* IMPORTS EXTERNAL */

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


/* BAR */

.bar label {
  font-size: 1.2rem;
}