.sds-interface {
  background-color: #2e2b3c;
  border-top: #ffffff13 solid 1px;

  display: flex;
  align-items: center;
}

#sds-powerButton {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-inline: 18px;
}

#sds-powerButtonOn {
  max-width: 42px;
  aspect-ratio: 1/1;
  cursor: pointer;
  pointer-events: all;
}

#sds-powerButtonOff {
  max-width: 42px;
  aspect-ratio: 1/1;
  cursor: pointer;
  pointer-events: all;
}

.hidden {
  display: none;
}

.verticalDivider {
  grid-area: divider;
  height: 61px;
  border-right: solid 1px var(--color-white-dark);
}

#sds-volumeContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-inline: 11px;
  gap: 3px;

  font-size: 10px;
}

#sds-volumeBody {
  position: relative;
}

.sds-slider {
  position: absolute;
  z-index: 2;
  transform: translateY(3px);

  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 10px;
  background: #d3d3d300;
  outline: none;
}

.sds-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 19px;
  height: 10px;
  background: url(../ui/sds-volumeHandle.svg);
  cursor: pointer;
  border-radius: 2px;
}

.sds-slider::-moz-range-thumb {
  width: 19px;
  height: 10px;
  background: url(../ui/sds-volumeHandle.svg);
  cursor: pointer;
  border-radius: 2px;
}

#sds-volumeSlider {
  display: flex;
  justify-content: center;
}

#sds-interfaceControls {
  width: 474px;
  display: flex;
  justify-content: center;
}

#sds-interfaceButtonContainer {
  display: flex;
  position: absolute;
  gap: 6px;
  transform: translate(0, 20px);
}

.sds-button {
  width: 92px;
  cursor: pointer;
  pointer-events: all;

  transition: transform 0.05s, filter 0.2s;
}

.buttonPressed {
  transform: translateY(4px);
  filter: brightness(0.8);
}