$default-foreground: #ebdbb2;
$highlight-foreground: #fbf1c7;

* {
  all: unset;
  font-family: Ubuntu, "Material Design Icons";
  font-size: 10.5pt;
  color: $default-foreground;
}

@mixin oscillate-highlight($function, $stop, $background, $duration) {
  $name: inline-#{unique-id()};

  @keyframes #{$name} {
    #{$stop} {
      background: $background;
      color: $highlight-foreground;
    }
  }

  animation-name: $name;
  animation-duration: $duration;
  animation-iteration-count: infinite;
  animation-timing-function: $function;
}

@mixin breathe-highlight($background, $duration) {
  @include oscillate-highlight(ease-in-out, 50%, $background, $duration);
}

@mixin pulse-highlight($stop, $background, $duration) {
  @include oscillate-highlight(ease-out, $stop, $background, $duration);
}

@mixin indicate-active($color, $selector) {
  transition:
    box-shadow 300ms ease-in,
    background 300ms ease-in;

  #{$selector} {
    transition:
      box-shadow 600ms ease-out,
      background 600ms ease-out;
    box-shadow: 0 2px 0 0 $color inset;
    background: #3c3836;
  }
}

@mixin indicate-hover($color) {
  transition: background 120ms ease-in;

  &:hover {
    transition: background 120ms ease-out;
    background: $color;
  }
}

#clock,
#submap,
#backlight,
#network,
#bluetooth,
#cpu,
#temperature,
#pulseaudio,
#memory,
#battery,
#idle_inhibitor,
#tray,
#mpris,
#window {
  padding-left: 8px;
  padding-right: 8px;
}

window#waybar {
  // background: #1d2021;
  background: #000000;
  // border-bottom: 1px solid #3c3836;
}

tooltip,
window.popup {
  background: #282828;
  border: 1px solid #665c54;
  // border-radius: 3px;
}

window.popup {
  menu {
    padding: 5px 0;

    arrow {
      min-width: 16px;
      min-height: 16px;

      &.top {
        -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
      }

      &.bottom {
        -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
      }

      &.right {
        -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
      }

      &.left {
        -gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
      }
    }

    menuitem {
      padding: 4px 8px;

      transition:
        color 66ms ease-in,
        background 66ms ease-in;

      &:hover {
        transition:
          color 100ms ease-out,
          background 100ms ease-out;

        color: $highlight-foreground;
        background: #689d6a;
      }
    }

    separator {
      min-height: 1px;
      background: #665c54;
      margin: 4px 0;
    }
  }
}

#clock.time {
  font-weight: bold;
}

#tray {
  & > * {
    @include indicate-hover(#282828);
  }
}

#mpris {
  @include indicate-hover(#282828);
}

#submap {
  @include indicate-active(#d3869b, "&");
}

#workspaces {
  button {
    min-width: 26px;
    padding: 6px;

    @include indicate-hover(#282828);
    @include indicate-active(#f38019, "&.active");

    &.urgent {
      animation-delay: 5s;
      @include pulse-highlight(10%, #458588, 1.5s);
    }
  }
}

#network {
  @include indicate-hover(#282828);
  @include indicate-active(#689d6a, "&.wifi");
  @include indicate-active(#458588, "&.ethernet");
  @include indicate-active(#b16286, "&.linked");
}

#bluetooth {
  @include indicate-hover(#282828);
  @include indicate-active(#458588, "&.on");
  @include indicate-active(#98971a, "&.connected");

  &.on {
    @include breathe-highlight(#458588, 5s);
  }

  // &.discoverable {
  //   @include breathe-highlight(#b16286, 5s);
  // }

  // &.discovering {
  //   @include breathe-highlight(#b16286, 5s);
  // }

  // &.pairable:not(.connected) {
  //   @include breathe-highlight(#b16286, 5s);
  // }
}

#battery {
  &.battery-30:not(.charging) {
    @include breathe-highlight(#d64d0e, 10s);
  }

  &.battery-20:not(.charging) {
    @include pulse-highlight(10%, #d64d0e, 5s);
  }

  &.battery-10:not(.charging) {
    @include pulse-highlight(30%, #cc241d, 750ms);
  }
}

#temperature.critical {
  @include pulse-highlight(30%, #cc241d, 750ms);
}

#idle_inhibitor {
  @include indicate-hover(#282828);
  @include indicate-active(#d79921, "&.activated");

  &.activated {
    @include pulse-highlight(10%, #d79921, 5s);
  }
}

#pulseaudio {
  @include indicate-hover(#282828);

  &.output:not(.safe) {
    @include breathe-highlight(#cc241d, 10s);
  }
}
