.side-bar-cntr {
  transition: 0.24s ease-out !important;
  overflow: visible !important;
  transform: translateZ(0) translateX(100%) !important;
  &:hover {
    transform: translateZ(0) !important;
  }
  &::after {
    right: calc(100% + 4px);
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-radius: 2px;
    box-sizing: border-box;
    border: 4px solid #aaa;
    border-top-color: transparent;
    border-right-color: transparent;
  }
  body.dark &::after {
    border: 4px solid #eee;
    border-top-color: transparent;
    border-right-color: transparent;
  }
  &::before {
    right: calc(100% - 8px);
    transform: translateY(-50%);
    width: 32px;
    height: 48px;
    border-radius: 8px 0 0 8px;
    background-color: #fff;
    border: 1px solid #e9eaec;
  }
  body.dark &::before {
    background-color: #222;
    border-color: transparent;
  }
  &::before,
  &::after {
    content: "";
    transition: 0.24s ease-out;
    cursor: pointer;
    position: fixed;
    top: 50%;
  }
  &:hover::after,
  &:hover::before {
    opacity: 0;
  }
}
