.eggy {
   position: fixed;
   width: 400px;
   max-width: 90%;
   padding: 1rem;
   top: 0;
   z-index: 1100;
}
.eggy,
.eggy > div {
   overflow: hidden;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}
.eggy > div {
   width: 100%;
   -webkit-transition: opacity 0.3s ease, left 0.2s ease, right 0.2s ease,
      max-height 0.4s, margin-top 0.4s, padding 0.4s;
   transition: opacity 0.3s ease, left 0.2s ease, right 0.2s ease,
      max-height 0.4s, margin-top 0.4s, padding 0.4s;
   position: relative;
   opacity: 0;
   max-height: 200px;
   margin-top: 10px;
   border-radius: 4px;
   padding: 0.75rem 1rem;
   background: #fff;
   display: -ms-grid;
   display: grid;
   -ms-grid-columns: 1fr 5fr 1fr;
   grid-template-columns: 1fr 5fr 1fr;
   grid-gap: 0.5rem;
   display: -ms-flexbox;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   z-index: 2;
}
.eggy > div.open {
   opacity: 1;
}
.eggy > div.closing {
   max-height: 0;
   opacity: 0;
   margin-top: 0;
   padding: 0;
}
.eggy.top-right {
   right: 0;
}
.eggy.top-right > div {
   right: -425px;
}
.eggy.top-right > div.open {
   right: 0;
}
.eggy.top-left {
   left: 0;
}
.eggy.top-left > div {
   left: -425px;
}
.eggy.top-left > div.open {
   left: 0;
}