.split-support {
  transition: width 420ms ease, margin 420ms ease;
}

/* Split View */

.split-support-dialog-left {
  margin-left: 0;
  width: 50vw !important;
  overflow: visible;
}

.split-support-conference-right {
  margin-left: 50vw !important;
  width: 50vw !important;
}

/* Split View Open Dialog */

.split-support-dialog-left-open {
  margin-left: 0;
  width: 100vw;
}

.split-support-conference-right-closed {
  margin-left: 100vw !important;
  width: 0 !important;
  overflow: hidden;
}

/* Split View Open Conference */

.split-support-dialog-left-closed {
  margin-left: 0;
  width: 0;
  overflow: visible !important;
}

.split-support-conference-right-open {
  width: 100vw !important;
  margin-left: 0 !important;
}

/* Split Bar */

.split-feature-bar {
  position: absolute;
  width: 60px;
  min-height: 60px;
  border-radius: 10px;
  background-color: rgba(var(--conference-background));
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  left: calc(50vw - 30px);
  z-index: 420;
  box-shadow: 0 0 10px rgb(0 0 0 / 42%);
  transition: left 420ms ease, margin 420ms ease, position 420ms ease;
}

.split-support-dialog-left-open .split-feature-bar {
  --insetR: env(safe-area-inset-right, 0);
  --marginR: calc(100vw - 60px);
  left: calc(var(--marginR) - var(--insetR));
}

.split-support-dialog-left-closed .split-feature-bar {
  --insetL: env(safe-area-inset-left, 0);
  left: calc(0 + var(--insetL));
}

.split-feature-bar .md-button {
  overflow: visible;
}

.split-feature-bar .md-button .tooltip {
  display: flex;
  border-radius: var(--default-radius);
  background-color: rgba(var(--conference-background));
  color: #ffffff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 8px;
  font-size: 8pt;
}

.split-feature-bar .md-button .tooltip.is-left {
  right: calc(100% + 16px);
}

.split-feature-bar .md-button .tooltip.is-right {
  left: calc(100% + 16px);
}

/* Split Bar Icons */

.split-feature-bar md-icon {
  color: white;
}

.split-feature-bar .md-button[disabled] md-icon {
  color: rgba(255, 255, 255, 0.38);
}

.split-feature-bar md-icon.turn {
  transform: rotate(90deg);
}

.split-feature-bar .news-badge {
  position: absolute;
  top: 6px;
  right: 8px;
  background-color: rgb(171, 36, 36);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}