@use "../../util/colours.scss" as *;

window.Bar {
  font-family: "Comfortaa, sans-serif";
  background: transparent;
  color: $fg-color;
  font-weight: bold;

  /* >centerbox { */
  /*     background: $bg-color; */
  /*     border-radius: 10px; */
  /*     margin: 8px; */
  /* } */
  .mode-status {
    color: white;
    background-color: #00002dff;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 5px;
    border-radius: 20px;
    font-family: $monospace-font;

    &.windowing-mode {
      background-color: darkslategray;
      color: white;
    }

    &.workspace-mode {
      background-color: darkblue;
      color: white;
    }

    &.launch-mode {
      background-color: darkgreen;
      color: white;
    }

    &.device-mode {
      background-color: darkred;
      color: white;
    }

    &.screenshotting-mode {
      background-color: purple;
      color: white;
    }

    &.notifications-mode {
      background-color: darkorange;
      color: white;
    }
  }

  .bar-button {
    border-radius: 20px;
    margin: 2px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: $bg-color;

    & button {
      background-color: $bg-color;
    }
  }

  .quick-action-button {
    border-radius: 20px;
    margin: 2px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: $bg-color;
  }

  button.workspace-button {
    border-radius: 20px;
    margin: 1px;

    &.focused-workspace-button {
      color: $accent-color-2;
    }
  }

  .tray-item {
    margin: 0;
    padding: 0;

    & button {
      margin: 2px;
      box-shadow: none;
    }
  }

  .time {
    min-width: 11rem;
    padding: 3px;

    & button {
      box-shadow: none;
      padding: 0;
    }
  }

  .quick-view-symbol {
    margin: 4px;
  }
}