$crust: #181926;
$mantle: #1e2030;
$base: #24273a;

$surface0: #363a4f;
$surface1: #494d64;
$surface2: #5b6078;

$rosewater: #f4dbd6;

* {
  color: $rosewater;
  font-family: JetBrainsMono Nerd Font;
}

button {
  all: initial;
}

window.Bar {
  background: transparent;
  font-weight: bold;

  > centerbox {
    background: rgba($color: $base, $alpha: 0.75);
    border-bottom: 1px solid $rosewater;

    > box {
      margin: 6px;
      & > * {
        margin: 0 4px;
      }
    }
  }

  .Arch {
    -gtk-icon-size: 24px;
    padding: 4px 8px 4px 8px;
    border-radius: 8px;
    background: $surface0;

    &:hover {
      background: $rosewater;
      color: $base;
    }
  }

  .Pywal {
    font-size: 18px;
    padding: 4px 18px 4px 12px;
    border-radius: 8px;
    background: $surface0;

    &:hover {
      background: $rosewater;
      color: $base;
    }
  }

  .Tray > * {
    margin: 0 4px;
  }

  .Button {
    padding: 4px 12px;
    border-radius: 8px;
    background: $surface0;

    &:hover {
      background: $rosewater;
      color: $base;
    }
  }

  .Label {
    padding: 4px 12px;
    border-radius: 8px;
    background: $surface0;
  }

  .Button-Active {
    background: $rosewater;
    color: $base;
  }

  .WirePlumberMenu {
    contents {
      all: initial;
    }

    arrow {
      all: initial;
    }

    box {
      padding: 12px;
      border-radius: 8px;
      background: rgba($color: $base, $alpha: 0.9);

      & > * {
        margin: 2px 0;
      }
    }
  }
}