@use "../abstracts/variables" as *; @use "../abstracts/mixins" as *; .initial-selectLayout-wrapper { position: fixed; top: 100px; left: 40px; z-index: 10; .regularDropdown-container { background: var(--background-color); } } .compareLayOut-wrapper { position: fixed; top: 0; right: 0; z-index: 2; height: 100vh; background: var(--background-color); backdrop-filter: blur(20px); display: flex; justify-content: center; align-items: center; animation: slideInFromRight 0.4s ease-out forwards; user-select: none; .selectLayout-wrapper { position: absolute; top: 100px; right: 40px; .regularDropdown-container { background: var(--background-color); } } .chooseLayout-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: relative; .resizer { width: 32px; height: 32px; @include flex-center; padding: 6px; position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); background: var(--background-color); backdrop-filter: blur(20px); box-shadow: $box-shadow-heavy; border-radius: 50%; cursor: ew-resize; transition: transform 0.1s ease; z-index: 10; } .chooseLayout-wrapper { background: var(--background-color); backdrop-filter: blur(20px); padding: 20px; border-radius: 8px; box-shadow: $box-shadow-medium; max-width: 80%; text-align: center; position: relative; .icon { width: 100%; margin-bottom: 15px; text-align: center; svg { width: 100%; } } .value { margin-bottom: 15px; font-size: var(--font-size-small); font-weight: 500; color: var(--text-primary); } button { display: block; margin: 0 auto; padding: 8px 16px; background: var(--background-color-button); color: var(--icon-default-color-active); border: none; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; &:hover { transform: translateY(-1px); } } .displayLayouts-container { max-width: 170px; height: auto; background: var(--background-color); backdrop-filter: blur(20px); padding: 6px; border-radius: 8px; box-shadow: $box-shadow-medium; position: absolute; right: 0; top: 100%; transform: translate(50%, -10px); display: flex; flex-direction: column; gap: 6px; .header { text-align: left; padding-top: 6px; padding-left: 6px; } .search-wrapper { padding: 6px 0; .search-container { padding: 0; border-radius: 6px; } } .layouts-container { .layout { padding: 6px 0; } .layout-wrapper { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 0 10px; background: none; width: 100%; &:hover { background-color: var(--highlight-text-color) !important; border-radius: 4px; .layout { color: var(--text-button-color) !important; } svg { path { fill: var(--text-button-color) !important; } } .layout { color: var(--background-color-accent); } } } } } } } } @keyframes slideInFromRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } // body.compare-layout-open { // main { // padding-right: 10px; // transition: padding 0.3s ease; // } // }