@import "../global/globalCssVariables";

.collectionMenu-container {
    display: flex;
    position: relative;
    align-content: center;
    justify-content: space-between;
    background-color: $dark-gray;
    height: 35px;
    border-bottom: $standard-border;
    padding-right: 5px;
    align-items: center;

    .collectionMenu-hardCodedButton {
        cursor: pointer;
        color: $white;
        width: 25px;
        height: 25px;
        padding: 5;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        transition: 0.2s;
        border-radius: 3px;

        &:hover {
            background-color: rgba(0, 0, 0, 0.2);
        }
    }
}

// .collectionMenu-cont {
//     position: relative;
//     display: inline-flex;
//     width: 100%;
//     opacity: 0.9;
//     z-index: 901;
//     transition: top .5s;
//     background: $dark-gray;
//     color: $white;
//     transform-origin: top left;
//     top: 0;
//     width: 100%;

//     .recordButtonOutline {
//         border-radius: 100%;
//         width: 18px;
//         height: 18px;
//         border: solid 1px $white;
//         display: flex;
//         align-items: center;
//         justify-content: center;
//     }

//     .recordButtonInner {
//         border-radius: 100%;
//         width: 70%;
//         height: 70%;
//         background: $white;
//     }

//     .collectionMenu {
//         display: flex;
//         height: 100%;
//         overflow: visible;
//         z-index: 901;
//         border: unset;

//         .collectionMenu-divider {
//             height: 100%;
//             margin-left: 3px;
//             margin-right: 3px;
//             width: 2px;
//             background-color: $medium-gray;
//         }

//         .collectionViewBaseChrome {
//             display: flex;
//             align-items: center;

//             .collectionViewBaseChrome-viewPicker {
//                 font-size: $small-text;
//                 outline-color: $black;
//                 color: $white;
//                 border: none;
//                 background: $dark-gray;               
//             }

//             .collectionViewBaseChrome-viewPicker:focus {
//                 outline: none;
//                 border: none;
//             }

//             .collectionViewBaseChrome-viewPicker:active {
//                 outline-color: $black;
//             }

//             .collectionViewBaseChrome-button {
//                 font-size: $small-text;
//                 text-transform: uppercase;
//                 letter-spacing: 2px;
//                 background: $white;
//                 color: $pink;
//                 outline-color: $black;
//                 border: none;
//                 padding: 12px 10px 11px 10px;
//                 margin-left: 10px;
//             }

//             .collectionViewBaseChrome-cmdPicker {
//                 margin-left: 3px;
//                 margin-right: 0px;
//                 font-size: $small-text;
//                 text-transform: capitalize;
//                 color: $white;
//                 border: none;
//                 background: $dark-gray;     
//             }

//             .collectionViewBaseChrome-cmdPicker:focus {
//                 border: none;
//                 outline: none;
//             }

//             .commandEntry-outerDiv {
//                 pointer-events: all;
//                 background-color: transparent;
//                 display: flex;
//                 flex-direction: row;
//                 align-items: center;
//                 justify-content: center;
//                 height: 100%;
//                 overflow: hidden;

//                 .commandEntry-drop {
//                     color: $white;
//                     width: 30px;
//                     margin-top: auto;
//                     margin-bottom: auto;
//                 }
//             }

//             .commandEntry-outerDiv:hover{
//                 background-color: $drop-shadow;

//                 .collectionViewBaseChrome-viewPicker,
//                 .collectionViewBaseChrome-cmdPicker{
//                     background: $dark-gray;
//                 }
//             }

//             .collectionViewBaseChrome-collapse {
//                 transition: all .5s, opacity 0.3s;
//                 position: absolute;
//                 width: 30px;
//                 transform-origin: top left;
//                 pointer-events: all;
//                 // margin-top: 10px;
//             }

//             @media only screen and (max-device-width: 480px) {
//                 .collectionViewBaseChrome-collapse {
//                     display: none;
//                 }
//             }

//             .collectionViewBaseChrome-template,
//             .collectionViewBaseChrome-viewModes {
//                 align-items: center;
//                 height: 100%;
//                 display: flex;
//                 background: transparent;
//                 color: $medium-gray;
//                 justify-content: center;
//             }

//             .collectionViewBaseChrome-viewSpecs {
//                 margin-left: 5px;
//                 display: grid;
//                 border: none;
//                 border-right: solid $medium-gray 1px;

//                 .collectionViewBaseChrome-filterIcon {
//                     position: relative;
//                     display: flex;
//                     margin: auto;
//                     background: $dark-gray;
//                     color: $white;
//                     width: 30px;
//                     height: 30px;
//                     align-items: center;
//                     justify-content: center;
//                     border: none;
//                     border-right: solid $medium-gray 1px;
//                 }

//                 .collectionViewBaseChrome-viewSpecsInput {
//                     padding: 12px 10px 11px 10px;
//                     border: 0px;
//                     color: $medium-gray;
//                     text-align: center;
//                     letter-spacing: 2px;
//                     outline-color: $black;
//                     font-size: $small-text;
//                     background: $white;
//                     height: 100%;
//                     width: 75px;
//                 }

//                 .collectionViewBaseChrome-viewSpecsMenu {
//                     overflow: hidden;
//                     transition: height .5s, display .5s;
//                     position: absolute;
//                     top: 60px;
//                     z-index: 100;
//                     display: flex;
//                     flex-direction: column;
//                     background: $white;
//                     box-shadow: $medium-gray 2px 2px 4px;

//                     .qs-datepicker {
//                         left: unset;
//                         right: 0;
//                     }

//                     .collectionViewBaseChrome-viewSpecsMenu-row {
//                         display: grid;
//                         grid-template-columns: 150px 200px 150px;
//                         margin-top: 10px;
//                         margin-right: 10px;

//                         .collectionViewBaseChrome-viewSpecsMenu-rowLeft,
//                         .collectionViewBaseChrome-viewSpecsMenu-rowMiddle,
//                         .collectionViewBaseChrome-viewSpecsMenu-rowRight {
//                             font-size: $small-text;
//                             letter-spacing: 2px;
//                             color: $medium-gray;
//                             margin-left: 10px;
//                             padding: 5px;
//                             border: none;
//                             outline-color: $black;
//                         }
//                     }

//                     .collectionViewBaseChrome-viewSpecsMenu-lastRow {
//                         display: grid;
//                         grid-template-columns: 1fr 1fr 1fr;
//                         grid-gap: 10px;
//                         margin: 10px;
//                     }
//                 }
//             }
//         }

//         .collectionStackingViewChrome-cont,
//         .collectionTreeViewChrome-cont,
//         .collection3DCarouselViewChrome-cont {
//             display: flex;
//             justify-content: space-between;
//         }

//         .collectionGridViewChrome-cont {
//             display: flex;
//             margin-left: 10;

//             .collectionGridViewChrome-viewPicker {
//                 font-size: $small-text;
//                 //text-transform: uppercase;
//                 //letter-spacing: 2px;
//                 background: $dark-gray;
//                 color: $white;
//                 outline-color: $black;
//                 color: $white;
//                 border: none;
//                 border-right: solid $medium-gray 1px;
//             }

//             .collectionGridViewChrome-viewPicker:active {
//                 outline-color: $black;
//             }

//             .grid-control {
//                 align-self: center;
//                 display: flex;
//                 flex-direction: row;
//                 margin-right: 5px;

//                 .grid-icon {
//                     margin-right: 5px;
//                     align-self: center;
//                 }

//                 .flexLabel {
//                     margin-bottom: 0;
//                 }

//                 .collectionGridViewChrome-entryBox {
//                     width: 50%;
//                     color: $black;
//                 }

//                 .collectionGridViewChrome-columnButton {
//                     color: $black;
//                 }
//             }
//         }

//         .collectionStackingViewChrome-sort,
//         .collectionTreeViewChrome-sort {
//             display: flex;
//             align-items: center;
//             justify-content: space-between;

//             .collectionStackingViewChrome-sortIcon,
//             .collectionTreeViewChrome-sortIcon {
//                 transition: transform .5s;
//                 margin-left: 10px;
//             }
//         }

//         button:hover {
//             transform: scale(1);
//         }


//         .collectionStackingViewChrome-pivotField-cont,
//         .collectionTreeViewChrome-pivotField-cont,
//         .collection3DCarouselViewChrome-scrollSpeed-cont {
//             justify-self: right;
//             align-items: center;
//             display: flex;
//             grid-auto-columns: auto;
//             font-size: $small-text;
//             letter-spacing: 2px;

//             .collectionStackingViewChrome-pivotField-label,
//             .collectionTreeViewChrome-pivotField-label,
//             .collection3DCarouselViewChrome-scrollSpeed-label {
//                 grid-column: 1;
//                 margin-right: 7px;
//                 user-select: none;
//                 font-family: $sans-serif;
//                 letter-spacing: normal;
//             }

//             .collectionStackingViewChrome-sortIcon {
//                 transition: transform .5s;
//                 grid-column: 3;
//                 text-align: center;
//                 display: flex;
//                 justify-content: center;
//                 align-items: center;
//                 cursor: pointer;
//                 width: 25px;
//                 height: 25px;
//                 border-radius: 100%;
//             }

//             .collectionStackingViewChrome-sortIcon:hover {
//                 background-color: $drop-shadow;
//             }

//             .collectionStackingViewChrome-pivotField,
//             .collectionTreeViewChrome-pivotField,
//             .collection3DCarouselViewChrome-scrollSpeed {
//                 color: $white;
//                 grid-column: 2;
//                 grid-row: 1;
//                 width: 90%;
//                 min-width: 100px;
//                 display: flex;
//                 height: 80%;
//                 border-radius: 7px;
//                 align-items: center;
//                 background: $white;

//                 .editable-view-input,
//                 input,
//                 .editableView-container-editing-oneLine,
//                 .editableView-container-editing {
//                     margin: auto;
//                     border: 0px;
//                     color: $light-gray !important;
//                     text-align: center;
//                     letter-spacing: 2px;
//                     outline-color: $black;
//                     height: 100%;
//                 }

//                 .react-autosuggest__container {
//                     margin: 0;
//                     color: $medium-gray;
//                     padding: 0px;
//                 }
//             }
//         }

//         .collectionStackingViewChrome-pivotField:hover,
//         .collectionTreeViewChrome-pivotField:hover,
//         .collection3DCarouselViewChrome-scrollSpeed:hover {
//             cursor: text;
//         }

//     }
// }

// .collectionMenu-webUrlButtons {
//     margin-left: 44;
//     background: lightGray;
//     display: flex;
// }

// .webBox-urlEditor {
//     position: relative;
//     opacity: 0.9;
//     z-index: 901;
//     transition: top .5s;

//     .urlEditor {
//         display: grid;
//         grid-template-columns: 1fr auto;
//         padding-bottom: 10px;
//         overflow: hidden;
//         margin-top: 5px;
//         height: 35px;

//         .editorBase {
//             display: flex;

//             .editor-collapse {
//                 transition: all .5s, opacity 0.3s;
//                 position: absolute;
//                 width: 40px;
//                 transform-origin: top left;
//             }

//             .switchToText {
//                 color: $medium-gray;
//             }

//             .switchToText:hover {
//                 color: $dark-gray;
//             }
//         }

//         button:hover {
//             transform: scale(1);
//         }
//     }
// }

// .collectionMenu-urlInput {
//     padding: 12px 10px 11px 10px;
//     border: 0px;
//     color: $black;
//     font-size: $small-text;
//     letter-spacing: 2px;
//     outline-color: $black;
//     background: $white;
//     width: 100%;
//     min-width: 350px;
//     margin-right: 10px;
//     height: 100%;
// }

// .collectionFreeFormMenu-cont {
//     display: inline-flex;
//     position: relative;
//     align-items: center;
//     height: 100%;

//     .color-previewI {
//         width: 60%;
//         top: 80%;
//         position: absolute;
//         height: 4px;
//     }

//     .color-previewII {
//         width: 80%;
//         height: 80%;
//         margin-left: 10%;
//         position: absolute;
//         bottom: 5;
//     }

//     .btn-group {
//         display: grid;
//         grid-template-columns: auto auto auto auto;
//         margin: auto;
//         /* Make the buttons appear below each other */
//     }

//     .btn-draw {
//         display: inline-flex;
//         margin: auto;
//         /* Make the buttons appear below each other */
//     }

//     .fwdKeyframe,
//     .numKeyframe,
//     .backKeyframe {
//         cursor: pointer;
//         position: relative;
//         width: 20;
//         height: 30;
//         bottom: 0;
//         background: $dark-gray;
//         display: inline-flex;
//         align-items: center;
//         color: $white;
//     }

//     .backKeyframe {
//         svg {
//             display: block;
//             margin: auto;
//         }
//     }


//     .numKeyframe {
//         flex-direction: column;
//         padding-top: 5px;
//     }

//     .fwdKeyframe {
//         svg {
//             display: block;
//             margin: auto;
//         }

//         border-right: solid $medium-gray 1px;
//     }
// }

// .collectionSchemaViewChrome-cont {
//     display: flex;
//     font-size: $small-text;

//     .collectionSchemaViewChrome-toggle {
//         display: flex;
//         margin-left: 10px;
//     }

//     .collectionSchemaViewChrome-label {
//         text-transform: uppercase;
//         letter-spacing: 2px;
//         margin-right: 5px;
//         display: flex;
//         flex-direction: column;
//         justify-content: center;
//     }

//     .collectionSchemaViewChrome-toggler {
//         width: 100px;
//         height: 35px;
//         background-color: $black;
//         position: relative;
//     }

//     .collectionSchemaViewChrome-togglerButton {
//         width: 47px;
//         height: 30px;
//         background-color: $light-gray;
//         // position: absolute;
//         transition: all 0.5s ease;
//         // top: 3px;
//         margin-top: 3px;
//         color: $medium-gray;
//         letter-spacing: 2px;
//         text-transform: uppercase;
//         display: flex;
//         flex-direction: column;
//         justify-content: center;
//         text-align: center;

//         &.on {
//             margin-left: 3px;
//         }

//         &.off {
//             margin-left: 50px;
//         }
//     }
// }


// .commandEntry-outerDiv {
//     display: flex;
//     flex-direction: column;
//     height: 40px;
// }

// .commandEntry-inputArea {
//     display: flex;
//     flex-direction: row;
//     width: 150px;
//     margin: auto auto auto auto;
// }

// .react-autosuggest__container {
//     position: relative;
//     width: 100%;
//     margin-left: 5px;
//     margin-right: 5px;
// }

// .react-autosuggest__input {
//     border: 1px solid $light-gray;
//     border-radius: 4px;
//     width: 100%;
// }

// .react-autosuggest__input--focused {
//     outline: none;
// }

// .react-autosuggest__input--open {
//     border-bottom-left-radius: 0;
//     border-bottom-right-radius: 0;
// }

// .react-autosuggest__suggestions-container {
//     display: none;
// }

// .react-autosuggest__suggestions-container--open {
//     display: block;
//     position: fixed;
//     overflow-y: auto;
//     max-height: 400px;
//     width: 180px;
//     border: 1px solid $light-gray;
//     background-color: $white;
//     font-family: $sans-serif;
//     font-weight: 300;
//     font-size: $large-header;
//     border-bottom-left-radius: 4px;
//     border-bottom-right-radius: 4px;
//     z-index: 2;
// }

// .react-autosuggest__suggestions-list {
//     margin: 0;
//     padding: 0;
//     list-style-type: none;
// }

// .react-autosuggest__suggestion {
//     cursor: pointer;
//     padding: 10px 20px;
// }

// .react-autosuggest__suggestion--highlighted {
//     background-color: $light-gray;
// }