.video-preview { background: none; display: inline-block; max-height: 344px; &-container { background: $menuBG; border-radius: 3px; overflow: auto; padding: 8px; } &-entry { cursor: pointer; height: 168px; margin-bottom: 8px; position: relative; width: 284px; &:last-child { margin-bottom: 0; } &--selected { border: 3px solid #31B76A; border-radius: 3px; cursor: default; height: 162px; width: 278px; } } &-video { border-radius: 3px; height: 100%; object-fit: cover; width: 100%; } &-overlay { background: rgba(42, 58, 75, 0.6); height: 100%; position: absolute; width: 100%; z-index: 1; } &-error { align-items: center; display: flex; height: 100%; justify-content: center; position: absolute; width: 100%; } &-label { bottom: 8px; color: #fff; position: absolute; width: 100%; z-index: 2; &-container { margin: 0 16px; } &-text { background-color: #131519; border-radius: 3px; padding: 2px 8px; font-size: 13px; line-height: 20px; margin: 0 auto; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; width: fit-content; white-space: nowrap; } } }