#bar-inner,
#bar-inner.pills {
  margin: 8px;
  opacity: 1;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#bar-inner.dense,
#bar-inner.edge,
#bar-inner.edge.vertical,
#bar-inner.edgecenter.vertical {
  padding: 4px;
  background-color: var(--shadow);
  border-style: solid;
  border-color: var(--surface);
}

#bar-inner.dense {
  border-width: 2px;
}

#bar-inner.edge {
  border-width: 0 0 2px 0;
  border-radius: 0;
}

/* #bar-inner.edge.vertical { */
/*   border-width: 0 2px 0 0; */
/*   border-radius: 0; */
/* } */

#bar-inner.edge.bottom {
  border-width: 2px 0 0 0;
  border-radius: 0;
}

#bar-inner.edge.vertical.right {
  border-width: 0 0 0 2px;
  border-radius: 0;
}

#bar-inner.edge.vertical.left {
  border-width: 0 2px 0 0;
  border-radius: 0;
}

#bar-inner.edgecenter.vertical {
  border-width: 2px;
  border-left-width: 0;
  border-radius: 0 16px 16px 0;
}

#bar-inner.edge.vertical.right {
  border-width: 0 0 0 2px;
  border-radius: 0;
}

#bar-inner.edgecenter.vertical.right {
  border-width: 2px;
  border-right-width: 0;
  border-radius: 16px 0 0 16px;
}

#bar-inner.hidden {
  margin: 8px;
  margin-top: -40px;
  opacity: 0;
}

#date-time {
  background-color: var(--shadow);
  min-height: 36px;
  padding: 0 8px;
}

#date-time.vertical {
  padding: 8px 0;
}

#date-time.invert {
  background-color: var(--surface);
  border-radius: 12px;
}

menu > menuitem > label,
#date-time > label {
  font-weight: bold;
}

#language {
  min-height: 36px;
  background-color: var(--shadow);
  padding: 0 8px;
}

#language.invert {
  background-color: var(--surface);
  border-radius: 12px;
}

#lang-label {
  font-weight: bold;
}

#lang-label.icon {
  color: var(--primary);
  font-size: 20px;
}

#weather {
  background-color: var(--shadow);
  padding: 0 8px;
  min-height: 36px;
}

#weather.invert {
  background-color: var(--surface);
  border-radius: 12px;
}

#weather-label {
  font-weight: bold;
}

#systray {
  background-color: var(--shadow);
  padding: 8px;
}

#systray.invert {
  background-color: var(--surface);
  border-radius: 12px;
}

menu {
  border: solid 1px;
  border-radius: 16px;
  border-color: var(--surface);
  background-color: var(--shadow);
  padding: 6px;
}

menu > menuitem {
  border-radius: 10px;
  padding: 6px 10px;
}

menu > menuitem:hover {
  background-color: var(--primary);
}

menu > menuitem:hover > label {
  color: var(--shadow);
}

tooltip {
  border: solid 1px;
  border-color: var(--surface);
  background-color: var(--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;
}

#button-bar {
  padding: 4px;
  min-width: 28px;
  min-height: 28px;
  background-color: var(--shadow);
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#button-bar.invert {
  background-color: var(--surface);
  border-radius: 12px;
}

#button-bar-label {
  color: var(--primary);
  font-size: 20px;
  padding: 4px;
  border-radius: 40px;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#button-bar:hover #button-bar-label {
  border-radius: 12px;
  background-color: var(--surface_bright);
}

#button-bar:active #button-bar-label {
  border-radius: 40px;
  color: var(--shadow);
  background-color: var(--primary);
}

#corner {
  background-color: var(--shadow);
  border-radius: 0;
}

#corner-container {
  min-width: 20px;
  min-height: 20px;
}

#button-corner {
  border-radius: 0px;
  min-width: 20px;
  min-height: 20px;
}

#notch,
#bar {
  border-radius: 0px;
}