@import url(../../.cache/material/colors.css);
@import "./bar.css";
@import "./notification.css";
@import "./osd.css";
@import "./launcher.css";
@import "./dashboard.css";

* {
  all: unset;
  color: @foreground;
  font-size: 16px;
  font-family: "Chakra Petch", sans-serif;
}

/*
 * ── tooltip ───────────────────────────────────────────────────────────
*/

tooltip {
  border: solid 1px;
  border-radius: 10px;
  border-color: @surface;
  background-color: @shadow;
  animation: tooltipShow 0.25s cubic-bezier(0.5, 0.25, 0, 1);
}

@keyframes tooltipShow {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

tooltip > * {
  padding: 6px 10px;
  border-radius: 10px;
}

/*
 * ── dock ──────────────────────────────────────────────────────────────
*/
#dock-icon {
  padding: 0px 2px 0px 2px;
}

#dock {
  padding: 10px;
  background-color: alpha(@shadow, 0.5);
  border: 0.5px solid alpha(@outlineVariant, 0.4);
  border-radius: 12px;
  margin-bottom: 2px;
}

#dock-separator {
  border-right: 1px solid alpha(@foreground, 0.5);
}

#dock-app-button {
  padding: 2px;
  margin-left: 2px;
  margin-right: 2px;
  border-radius: 12px;
}

.show-dock {
  opacity: 1;
  margin: 0;
}

.hide-dock {
  opacity: 1;
  margin: -80px;
}