@import 'common'; $pref: 'be-eop'; $panel-padding: 18px; $internal-spacing: 14px; @mixin extra-options-panel { &.be-extra-options-panel { @include popup(); display: flex; flex-direction: column; width: 500px; max-width: 80vw; max-height: 80vh; padding: $panel-padding 0; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%) scale(0.95); transition: all 0.2s ease-out; font-size: 14px; line-height: normal; z-index: 100002; &.open { transform: translateX(-50%) translateY(-50%) scale(1); } > .#{$pref}-header { display: flex; justify-content: space-between; padding: 0 $panel-padding $internal-spacing $panel-padding; flex-shrink: 0; > .#{$pref}-h-title { display: flex; column-gap: 4px; > .#{$pref}-h-t-text { @include semi-bold(); font-size: 19px; line-height: 20px; } } > .#{$pref}-h-actions { display: flex; column-gap: ($internal-spacing + 4px); > .#{$pref}-h-a-action { cursor: pointer; transition: all 0.2s ease-out; &:hover { color: var(--theme-color); } } } } > .#{$pref}-separator { height: 1px; margin: 0 $panel-padding; background-color: rgba(0, 0, 0, 0.1); flex-shrink: 0; body.dark & { background-color: rgba(255, 255, 255, 0.1); } } > .#{$pref}-content { @include no-scrollbar(); padding: $internal-spacing $panel-padding 0 $panel-padding; overflow: auto; flex-grow: 1; flex-shrink: 1; > .#{$pref}-c-option { margin-bottom: ($internal-spacing + 4px); &:nth-last-child(1) { margin-bottom: ($internal-spacing - 2px); } > .#{$pref}-c-o-title { margin-bottom: 2px; font-size: 14px; } > .#{$pref}-c-o-description { margin-bottom: 8px; opacity: 0.6; font-size: 12px; } > .#{$pref}-c-o-input { @include h-center(); flex-wrap: wrap; } } } } }