.Panel { background: #1f1f1f; color: rgb(255 255 255 / 35%); font-size: 1.7rem; height: 100%; line-height: 1.4; padding: $grid-gutter-width calc($grid-gutter-width / 2); position: fixed; transition: transform 0.3s; right: 0; top: 0; z-index: 10; .close { filter: invert(1); margin: -1.6rem 0 0 -2.4rem; } .actionsHolder { height: 100%; display: flex; flex-direction: column; &.scrolled { overflow-y: auto; scroll-behavior: smooth; } } section { border-bottom: 2px solid rgb(255 255 255 / 10%); padding: 1.8rem 0; &:first-child { padding-top: 0; } p { margin: 0.6em 0; &:last-child { margin-bottom: 0; } } } .button { font-weight: normal; margin-left: -1.6rem; text-align: left; &:hover { color: #fff; text-decoration: none; } } .link { cursor: pointer; text-decoration: none; border-bottom: none; color: rgb(255 255 255 / 35%); font-size: inherit; font-weight: normal !important; &:hover { background: none; color: #fff; } } .linkWithIcon { margin-left: -1.6rem; } .stats { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; margin-top: 3em; } &.hidden { transform: translateX(100%); } .icon { display: inline-block; filter: invert(0.5); margin-right: 0.3em; width: 1em; img { vertical-align: bottom; } } .typograph { align-items: baseline; display: flex; flex-wrap: wrap; justify-content: space-between; } .typographStatus { @include font-size(1.2rem); } .typographStatusSuccess { color: #28d353; } .backToMenuControl { color: rgb(255 255 255 / 0.7); } .shortcutList { color: #fff; } .shortcut { margin-left: 1em; } .shortcutButton { border: 1px solid; border-bottom-width: 2px; border-radius: 2px; display: inline-block; font-style: italic; margin-right: 0.5em; padding: 0.1em 0.4em; } }