
:root {
  --overflow-correct : 6px;
  --shadow-correct : 6px
}

body {
  margin         : 0;

  margin-right   : var(--overflow-correct);
  margin-left    : var(--overflow-correct);
  margin-bottom : var(--shadow-correct);

  color          : var(--foreground);

  font-family    : "Lucida Grande",
                   sans-serif;
  font-size      : 10px;
  font-smooth : always;
  line-height    : var(--line-size);
  cursor: default;
  -webkit-app-region: drag;
  -webkit-user-select: none;
}

div {
  display : inline-block;
}

i {
  padding: 0px 8px;
}

.button {
  width: var(--line-size);
}

.bar {
  display          : flex;
  width            : 100%;
  background-color : var(--background);
  white-space      : nowrap;
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  overflow: hidden;
}

.container {
  width     : 33%;
  height    : var(--line-size);
  flex-grow: 1;
}

#left {
  text-align : left;
}

#middle {
  text-align : center;
}

#right {
  text-align : right;
}

.widg {
  min-width  : var(--line-size);
  text-align : center;
  -webkit-app-region: no-drag;
}

.output {
  padding-left: 4px;
  padding-right: 4px;
    position: relative;
    display: inline-block;
    color: var(--foreground) !important;
}
.output:only-child {
  margin-left: 8px;
  margin-right: 8px;
}
.pinned .output  {
  color: var(--background) !important;
}


.popup {
    display: none;
    line-height: calc( var(--line-size) / 2) ;
    z-index: 1;
    height: auto;
    opacity: 1 !important;
    background-color: var(--background);
    color: var(--foreground)
}
.popup  .open {
  display: block;
  animation:
}

.launcherItem {
  margin-right:8px;
}


ul {
  width: 100%;
  padding:0;
  margin:0;
  display:inline;
}

li {
    width: 100%;
    display: inline;
    text-decoration: none;
    border: 1px solid rgba(0,0,0,.4);
}

.popup.open {
  display:inline-block;
  animation : slideout 0.05s;
}

/* ANIMATION */

.blinking {
  animation: blink 1s linear infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
  }


  @keyframes slideout {
    from {
      width : 1px;
    }

    to {
      width : 24px;
    }
  }

/* BEHAVIOR */

.button:hover:not(.pinned) {
  color            : var(--background);
  background-color : var(--foreground);
  animation: fadein 0.2s linear
}

/* APPLY COLORS */

.dark {
  opacity: 0.4;
}

.red {
  color : var(--color1);
}

.green {
  color : var(--color2);
}

.yellow {
  color : var(--color3);
}

.blue {
  color : var(--color4);
}

.cyan {
  color : var(--color5);
}

.magenta {
  color : var(--color6);
}

.white {
  color : var(--foreground);
}

.black {
  color : var(--background);
}

.pinned {
  background-color: var(--foreground);
  color: var(--background);
}

.pinned.red {
  background-color : var(--color1);
}

.pinned.green {
  background-color : var(--color2);
}

.pinned.yellow {
  background-color : var(--color3);
}

.pinned.blue {
  background-color : var(--color4);
}

.pinned.cyan {
  background-color : var(--color5);
}

.pinned.magenta {
  background-color : var(--color6);
}
