// // Buttons and things that look like buttons //

.btn-selector {

@include fs-6;
display: flex; // transform animation breaks without this on theme-colors and graph-type...
cursor: pointer;
user-select: none;
padding: $sp-2;
transition: all .2s ease-in-out;

&:hover {
  transform: scale(1.5); 
}

/* Hide the browser's default checkbox */
input {
  opacity: 0;
  height: 0;
  width: 0;
}

#graph-type-emoji-span {
  filter: drop-shadow(0 0 0.7mm $drop-shadow-green);
}

#nav-type-emoji-span {
  filter: drop-shadow(0 0 0.7mm $drop-shadow-orange);
}

#entry-head-emoji-span {  
  filter: drop-shadow(0 0 0.7mm $drop-shadow-brown);  
}

#theme-colors-emoji-span {
  filter: drop-shadow(0 0 0.7mm $drop-shadow-yellow);
}

}

.entry-foot-selector {

@include fs-6;
display: flex;
cursor: pointer;
user-select: none;
padding-right: $sp-3;
padding-top: $sp-3;
transition: all .2s ease-in-out;

&:hover {
  transform: scale(1.5); 
}

/* Hide the browser's default checkbox */
input {
  opacity: 0;
  height: 0;
  width: 0;
}

#entry-foot-posts-emoji-span {
  filter: drop-shadow(0 0 0.7mm $drop-shadow-purple);  
}

#entry-foot-link-emoji-span {
  filter: drop-shadow(0 0 0.7mm $drop-shadow-brown);
}

}

.bonsai-burger {

display: flex;
flex-direction: column;
position: fixed;
right: $sp-2;
bottom: $sp-4;
cursor: pointer;
user-select: none;
filter: drop-shadow(0 0 0.7mm $drop-shadow-green);
z-index: 5;

/* Hide the browser's default checkbox */
input {
  opacity: 0;
  height: 0;
  width: 0;
}

#nav-base {
  margin-left: 10px;
  margin-right: 10px;
}

#nav-bonsai {
  margin-left: 5px;
}

}

.connect {

// 'sticky footer' from: https://css-tricks.com/couple-takes-sticky-footer/#there-is-flexbox
//  ex = local
//    footer = connect
//    content = main-content
//    body = main-content-wrap
//    html, body = main
flex-shrink: 0;

}