:root {
  --navigation-bar-background-color: #ddd;
  --navigation-bar-bright-color: #e8be76;
}

html[data-theme="light"] {
  --navigation-bar-background-color: #ddd;
  --navigation-bar-bright-color: #e8be76;
}

html[data-theme="dark"] {
  --navigation-bar-background-color: #666;
  --navigation-bar-bright-color: #94805b;
}

#btp-navigation-line {
  position: absolute;
  width: 80%;
  height: 25%;
}

.btp-control-images {
  position: relative;
  cursor: pointer;
  display: flex;
  width: 18%;
  height: 80%;
}

.btp-navigation-icons {
  position: absolute;
  width: 100%;
  height: 100%;
}

.btp-navigation-background-light-off {
  background-color: var(--navigation-bar-background-color);
}

.btp-navigation-background-light-on {
  background-color: var(--navigation-bar-bright-color);
}

#btp-lightbulb-placeholder {
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
}

#btp-shadow-image {
  position: absolute;
  display: flex;
  top: 9%;
  width: 63%;
  height: 82%;
  opacity: 0.14;
}

#btp-lightbulb-image {
  position: absolute;
  display: flex;
  top: 9%;
  width: 63%;
  height: 82%;
}