.dim-switch-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px;
  cursor: pointer;
  user-select: none;
  border: 0.8px solid rgba(0, 0, 0, 0.4) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
}

.dim-switch-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: 999px;
  background-color: seagreen;
  transition: left 0.7s ease, width 0.7s ease;
  pointer-events: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.dim-switch-label {
  position: relative;
  z-index: 1;
  border-radius: 999px;
  transition: color 0.2s ease;

  &.active {
    color: var(--bs-body-bg) !important;
  }
}

.dim-custom-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease;

  > * { overflow: hidden; }

  &.open {
    grid-template-rows: 1fr;
  }
}