// https://gitlab.gnome.org/GNOME/gtk/-/blob/gtk-3-24/gtk/theme/Adwaita/_colors-public.scss
// Colors:

$fg-color: white;
$active-color: #bdae93;
$hover-color: #b8bb26;

$bg-color: #{"@theme_bg_color"};
$corner-size: 7;

* {
  font-size: 18px;
}

window.Bar {
  background: transparent;
  /* background: #fbf1c7; */
  padding: 2px;
  margin: 5px;
  border-radius: 40px;
  padding-left: 10px;


  color: $fg-color;

  >centerbox {
    background: $bg-color;
    border-radius: 10px;
  }


  .AudioSlider {
    min-width: 200px;
  }

}

.Systray {
  color: $fg-color;
}

.Workspaces {
  $workspace-button-size: 8px;
  $bar-button-border-radius: 25px;

  margin: 0 60px 4px 60px;
  margin: 0;

  border: 2px solid black;
  padding: 3px;
  border-radius: 40px;
  transition: all 1 linear;
  transition-delay: 1s;

  button {
    all: unset;
    color: $fg-color;
    transition: min-width 0.25s ease-out;
    margin: 1em;
    padding: $workspace-button-size;
    margin: $workspace-button-size;
    background-color: black;
    border-radius: calc(nth($bar-button-border-radius, 1) * 1.5);
    /* Hide non-occupied workspaces */
    min-height: 0;
    min-width: 0;
    margin: 0;
    opacity: 0;
    padding: 0;
    transition: 0;

    &:hover {
      color: $fg-color;
      background-color: $fg-color;
    }

    &.active,
    &.occupied {

      opacity: 1;
      margin: 1rem;
      padding: $workspace-button-size;
      margin: $workspace-button-size;
    }

    &.active {
      min-width: 2.5rem !important;
      min-height: 0.95rem !important;
    }

    &.occupied {
      min-height: 0.65em;
      min-width: 0.65rem;
    }

  }
}