@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 background-base {
  background-color: $base01;
}
@mixin background-base2 {
  background-color: $base02;
}
@mixin background-active {
  background-color: $base04;
}
@mixin background-accent {
  background-color: $base0C;
}
@mixin color-base {
  color: $base07;
}
@mixin color-inactive {
  color: $base02;
}
@mixin color-active {
  color: $base04;
}
@mixin color-accent {
  color: $base0C;
}
@mixin color-body {
  color: $base05;
}

@mixin panel-base {
  @include border-radius;
  @include border-inactive;
  @include background-base;
  @include color-base;
}

@mixin mod-edge {
  border-right-style: none;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

/*  GENERAL */

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

tooltip {
  @include border-active;
  @include border-radius;
  @include background-base;

  label {
    font-size: 1rem;
  }
}

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

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

/* WORKSPACE COLORS - emitted dynamically by scripts/workspaces as class names */
.grey   { color: $base02; }
.red    { color: $base0F; }
.orange { color: $base08; }
.green  { color: $base0B; }
.blue   { color: $base0C; }

.workspace-sep {
  border-top: 2px solid $base03;
}

/* WINDOW WRAPPER CSS */

.winevent {
  @include panel-base;
}
.winevent:hover {
  @include border-active;
}

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

/* MODULE WRAPPER CSS */

.modevent {
  @include panel-base;
  @include mod-edge;
}
.modevent:hover {
  @include border-active;
  @include mod-edge;
}

.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;
}