@import "common"; .be-settings { > .be-popup { top: 0 !important; left: 0 !important; body.settings-panel-dock-right & { left: unset !important; right: 0 !important; } transform: translateZ(0) translateY(0) translateX(calc(-101% * var(--direction))) !important; --panel-height: 100vh !important; &.open { transform: translateZ(0) translateY(0) translateX(0) !important; } > * { border-radius: 0 !important; border-width: 0 1px 0 0 !important; height: var(--panel-height) !important; body.settings-panel-dock-right & { border-width: 0 0 0 1px !important; } } } > .sidebar > * { width: 52px !important; border-radius: 21px !important; transform: translateX(calc(-13px * var(--direction))) !important; display: flex !important; justify-content: flex-end !important; body.settings-panel-dock-right & { justify-content: flex-start !important; } .be-icon { transition: 0.2s ease-out !important; } &:hover { transform: translateX(calc(8px * var(--direction))) !important; .be-icon { transform: rotate(360deg) !important; } } &.open { transform: translateX(calc(12px * var(--direction))) !important; } } .settings-panel-popup .component-tags .component-tags-item:last-child { border-radius: 0 !important; } .widgets-panel { padding: 24px !important; @include no-scrollbar(); &-header { margin-bottom: 36px !important; } .widgets-popup { --columns: 1; --medal-columns: 1; --title-columns: 1; left: 50%; top: calc(100% + 4px) !important; transform-origin: top !important; box-sizing: border-box; max-width: calc(100% + 44px) !important; max-height: unset !important; transform: translateX(calc(-50% * var(--direction))) scale(0.9) !important; display: flex !important; flex-wrap: wrap !important; > * { flex-grow: 1; } &.open { transform: translateX(calc(-50% * var(--direction))) scale(1) !important; } body.settings-panel-dock-right & { left: unset !important; right: 50% !important; } } } }