.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; } }