#appsBarCenterer {
    display: flex;
    width: 100%;
    justify-content: center;
}
#appsBar {
    display: flex;
    justify-content: flex-start;
    max-width: 100%;
    /*this would break the scroll at the start*/
    /*justify-content: center;*/
    /*that's why we have nested one at top :1*/
    overflow-x: scroll;
}

.startBarAppIcon {
    border: none; /*for button*/
    color: inherit;

    background-color: #444;
    transition-duration: 260ms;
    border-radius: 0.4rem;
    padding: 0.2rem;
    margin: var(--app-bar-icon-margin);
    margin-top: var(--start-bar-scroller-height);
    margin-bottom: 0;
    /*height: calc(100% - 2 * var(--app-bar-icon-margin) - var(--start-bar-scroller-height));*/
    height: calc(100% - var(--start-bar-scroller-height));
    width: var(--startbar-height);
    min-width: var(--startbar-height);

    animation-name: appIconAppearAnimation;
    animation-duration: 300ms;

    overflow: hidden;
    text-align: center;
    vertical-align: center;
}

@keyframes appIconAppearAnimation{
    from{
        min-width: 0;
        width: 0;
        padding: 0;
        background-color: #555;
        box-shadow: 0 0 0 0.4rem #aaa inset;
    }
    to{
        min-width: var(--startbar-height);
        background-color: #444;
        box-shadow: 0 0 0 0 #aaa0 inset;
    }
}

.appPreview {
    background-color: hsl(250deg, 20%, 50%);
    min-height: var(--app-preview-size);
    min-width: var(--app-preview-size);
}

.startBarAppIcon:hover {
    z-index: 999;
    /* border: 4px solid #888; */
    background-color: #888;
    transition-duration: 160ms;
}

.appsBarContainer {
    /* display: none; */ /* it always is shown :/ */
    display: flex;
    position: absolute;
    bottom: calc(100% - var(--start-bar-scroller-height));
    /*start-bar-scroller is the scroller on icons, not previews*/
    /*the top/buttom margins are defined from this*/
    left: var(--app-previews-panel-side-padding);
    width: calc(100% - 2 * var(--app-previews-panel-side-padding));
    justify-content: center;
    /* background-color: #4444; */

    user-select: none;
    transform-origin: bottom;
    transition-timing-function: ease;
    transition-duration: 160ms;
    /*transform: scale(-1.3, 0) translateY(calc((100%) - 4.5 * var(--startbar-height)));*/
    transform: scale(0.4, 0);
    opacity: 0;
}

/*.startBarAppIcon:hover > .appsBarContainer > .centeredAppPreviewContainer > .appPreview {*/
    /*border-radius: 50%;*/
    /*box-shadow: 0 10px #2222;*/
/*}*/

.startBarAppIcon > .appsBarContainer > .centeredAppPreviewContainer > .appPreview{
    transform: scale(-1, 1);
}
/*!!*/
/*.startBarAppIcon:focus > .appsBarContainer > .centeredAppPreviewContainer > .appPreview,*/
.startBarAppIcon:hover > .appsBarContainer > .centeredAppPreviewContainer > .appPreview{
    /*background-color: red;*/
    transform: scale(1);
    transition-duration: 500ms;
}

.startBarAppIcon:hover > .appsBarContainer {
    /* border: 2px solid #eeed; */
    transform: scale(1);
    opacity: 1;
    transition-duration: 600ms;
    transition-timing-function: cubic-bezier(0.27, 0.82, 0.165, 1);
}

/* @keyframes appPreviewBring {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    100% {
        opacity: 1;
        transform: translateY(calc( -1 * var(--app-preview-size)));
    }
  } */

/* styles */

#appsBar {
    gap: 0.2rem;
}

.appsBarContainer {
}

/*.startBarAppIcon:hover > .appsBarContainer > .centeredAppPreviewContainer > .appPreview {*/
    /*transition-duration: 800ms;*/
    /*opacity: 1;*/
/*}*/

.appPreview {
    /*opacity: 0.8;*/
    transition-duration: 200ms;
    transform: scale(1);
    border-radius: 7px;
        /*padding-top: 4rem;*/
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;

}

/*.previewCloseBtn{*/
    /*pointer-events: none;*/
/*}*/
.appPreview:hover{
    /*pointer-events: all;*/
    z-index: 9999;
    position: relative;
}

.appPreview:hover {
    opacity: 1;
    transform: scale(1.2) !important; 
    transition-duration: 200ms !important;
    border: 2px solid #eeea;
}

/* we wanted it to be centered when it isn't big enough to be scrolled
display flex's feature makes it centered when its left is overflown
at the max left scrolled, we can't see them
so we a centered element which doesn't centers inner elements.
*/

.centeredAppPreviewContainer {
    padding: var(--app-previews-panel-padding) 30%;
}

/* width */
.centeredAppPreviewContainer::-webkit-scrollbar {
    width: var(--app-previews-panel-scrollbar-size);
    /* border-radius: 7px; */
}

/* Track */
.centeredAppPreviewContainer::-webkit-scrollbar-track {
    /*background: #98b4aa;*/
    background: #98b4aa00;
    border-radius: 2rem;
}

/* Handle */
.centeredAppPreviewContainer::-webkit-scrollbar-thumb {
    border-radius: 2rem;
    background: #634df5;
    border: 4px solid #98b4aa;
}

/* Handle on hover */
.centeredAppPreviewContainer::-webkit-scrollbar-thumb:hover {
    background: #423882;
}

.centeredAppPreviewContainer {
    display: flex;
    max-width: 100%;
    overflow-x: scroll;
    gap: 1.2rem;
}


/*for startbar general*/
#appsBar::-webkit-scrollbar {
    height: var(--start-bar-scroller-height);
    background-color: #0000;
}
 
#appsBar::-webkit-scrollbar-track {
    background-color: #0000;
}
 
#appsBar::-webkit-scrollbar-thumb {
    /*background-color: hsl(150, 50%, 50%);*/
    background-color: hsl(150, 100%, 68%);
    /*border: 1px solid #333;*/
    padding-right: calc(2 * var(--startbar-height)); /* 1 for won 1 for github profile pic from left. 
    lor maybe we can change it to all in the middle */
}



/*!!*/
/*#appsBar>.startBarAppIcon:focus{*/
    /*box-shadow: 0 0 0 2px #eeea inset;*/
/**/
/*}*/

/*#appsBar>.startBarAppIcon:hover:focus{*/
/*}*/


/*!!*/
/*#appsBar>.startBarAppIcon:focus>.appsBarContainer,*/
.startBarAppIcon:active > .appsBarContainer > .centeredAppPreviewContainer > .appPreview,
.startBarAppIcon:active>.appsBarContainer{
/*.startBarAppIcon:active>.appsBarContainer>.centeredAppPreviewContainer  {
    /*background-color: red;*/
    transform: scale(1);
    opacity: 1;
    /*transform: unset !important;*/

    /*transition-duration: none;*/
    transition: none ;
    /*transform: scale(1);*/
}