
// @import "./dynamic.css";
@use 'breakpoints.scss' as *;

// These constants will match the bookmark.SVG default size.
// Used for resize calculations
$bookmarkWidth: 26px;
$bookmarkHeight: 23px;

// Book Radius
$bookRadius: 5px;

/* Begin TitleBar Styling */
.titleBar{
  height: 50px;
  width: 100%;
  display:flex;
  align-items: center;
  gap:25px;
  // border-bottom: 1px solid var(--background-secondary);
  // margin-bottom:25px;
  background-color: var(--background-primary);
  color: var(--text-primary);
  justify-content: space-between;
}

.titleBarLogo {
  margin-left: 20px;
  // font-weight: bold;
  // font-size: 24px;
  user-select: none;
  pointer-events: none;
  flex-basis: 20%;
  display:flex;
  align-items: center;
}

.titleBarTitle{
  display:inline;
  margin-left:10px;
  font-size:18px;

  @include lt-md{
    display:none !important;
  }
}

.rightContainer{
  display:flex;
  align-items: center;
  height:100%;
  flex-basis: 20%;
  pointer-events: none;
  user-select: none;
  justify-content: flex-end;

  @include lt-sm{
    padding-right: 20px;

    > div:last-of-type{
      display:none;
    }

  
  }
  
  > *{
    pointer-events: all;
  }

}

.unstyleLink{
  text-decoration: none;
  &:focus, &:hover, &:visited, &:link, &:active {
    text-decoration: none;
  }
  color: inherit;
}

/* End TitleBar Styling */




/* Begin Book Case */
.bookCase {
  margin-top:10px;
  width: 100%;
  height: calc(100% - (75px + 10px));
  display: grid;
  justify-content: center;
  gap: 10px 10px;
  grid-template-columns: repeat(auto-fill, var(--book-width));
  grid-template-rows: repeat(auto-fill, var(--book-height));
  color: var(--text-primary);
  overflow: auto;
}

.bookCaseDragging{
  * {
    pointer-events: none;
  }
}

// Begin resize styles

@include lt-md{
  .bookCase, .boxPlaceholder{
    --book-width: 100px;
    --book-height: 150px;
    $base-color: salmon;
  }
  .bookTitle{
    font-size:8px;
  }
}

@include gt-sm{
  .bookCase, .boxPlaceholder{
    $ScaleFactor: 1.25;   
    --book-width: calc(100px * #{$ScaleFactor});
    --book-height: calc(150px * #{$ScaleFactor});
  }

}

@include gt-lg{
  .bookCase, .boxPlaceholder{
    $ScaleFactor: 1.75;   
    --book-width: calc(100px * #{$ScaleFactor});
    --book-height: calc(150px * #{$ScaleFactor});
  }
  .bookTitle{
    font-size:14px;
  }
}
/* End Book Case */






/* Begin Book styles */

.boxPlaceholder {
  width: var(--book-width);
  height: var(--book-height);
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3fr 1fr;
  cursor:pointer;
  // V1
  // box-shadow: inset 0px -40px 40px rgba(0, 0, 0, 0.7);
  // v2 - Improved shader, Perfect for one line
  // box-shadow: inset 0px -80px 20px -60px rgba(0,0,0,1);
  // V3
  // box-shadow: inset 0px -160px 30px -130px rgba(0,0,0,1);
  // V4 for usage when all other elements are removed
  box-shadow: inset 0px -180px 30px -160px rgb(0 0 0 / 71%);
  
  // Fixes bug where scrolling down will keep the shadow in place
  position: sticky;

  border-radius: $bookRadius;
  --book-radius: #{$bookRadius};
}

.boxPlaceholder::before {
  box-shadow: inset 0px -180px 30px -160px rgb(0 0 0 / 71%);
  position: absolute;
  width: var(--book-width);
  height: var(--book-height);
  content: "";
  border-radius: $bookRadius;
}

// .bookImageContainer::before {
//   box-shadow: inset 0px -180px 30px -160px rgb(0 0 0 / 71%);
// }

.bookImageContainer{
  grid-row: 1/3;
  grid-column: 1;
  align-self: flex-end;

  max-height: 100%;
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 3fr;
}


.boxTopBar{
  display:grid;
  grid-template-rows: 1fr;
  grid-template-columns: auto 3fr;
  height: 25px;
  width:100%;
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
}
.boxTopBar > div{
  grid-column: 1;
  grid-row: 1;
  font-size: 12px;
  text-align: center;
  color:white;
  // font-weight:bold;
  font-weight: 500;
  padding-top: 5px;

  margin-left:10px;
}
.boxTopBar > svg:first-of-type{
  grid-column: 1;
  grid-row: 1;
  transform-origin: 0% 0%;
  scale: 1.5;
  width: calc(#{$bookmarkWidth} * 1.5);
  z-index: -1;
  margin-left:10px;
}

.boxTopBar svg:last-of-type{
  grid-column: 2;
  justify-self: flex-end;
  color: white;
  // filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  filter: drop-shadow(0px 2px 1px rgba(0, 0, 0, .75));
  transform-origin: 0% 0%;
  scale: 1.25;
}
@include gt-lg{
  .boxTopBar > svg:last-of-type{
    transform-origin: 50% 0%;
    scale: 1.5;
  }
  .boxTopBar > svg:first-of-type{
    scale: 1.75;
    width: calc(#{$bookmarkWidth} * 1.75);
  }
  .boxTopBar > div{
    font-size: 14px;
  }
}

@include lt-md{
  .boxTopBar > svg:first-of-type{
    scale: 1;
    width: calc(#{$bookmarkWidth} * 1);
  }
  .boxTopBar > div{
    font-size: 8px;
    padding-top:3px;
  }

}

@include lt-sm{
  .boxTopBar > svg:last-of-type{
    display: none;
  }
}

.bookImage{
  object-fit: cover;
  align-self: flex-end;
  width:100%;
  // It seems like a recent webview update broke this line. Commenting it out seems to fix the issue, not sure why I added max-height in the first place
  // Proof this is a chromium bug is checking and unchecking the property makes the incorrect image height/squished image fix itself.
  // max-height: calc(100%) !important;
  grid-row: 1/3;
  grid-column: 1;
  border-radius: $bookRadius;
  // z-index: -1;
}

.test{
  align-self: flex-end;
  height: 100%;
  aspect-ratio: 3/4;
  grid-row: 1/3;
  grid-column: 1;
  background-color:red;
}

.boxBottomBar{
  width: var(--book-width);
  height: 40px;
  display:flex;
  flex-direction: row;
  align-items: flex-end;
  color:white;
  text-align: center;
  grid-column: 1;
  grid-row: 2;
  align-self: flex-end;
  padding-bottom:2px;
  z-index:1;
}
.boxBottomBar > div{
  flex-grow:1;
  font-size: 10px;
}
.boxBottomBar > svg{
  cursor:pointer;
  flex-basis:25%;
}


.boxBottomBar > div:first-of-type{
  font-weight: bold;
  // flex-grow:3;
  text-overflow:clip;
  overflow: hidden;
  // white-space: nowrap;
  // flex-basis:75%;
  // word-break: break-all;
  // background: #000000b5;
  border-radius: 0px 5px;
  margin-left: 3px;
  // @include stroke(3, #000000);
  flex-basis: 75%;

}

.searchbarDesktop{
  width: 100%;
  border-radius: 10px;
  background-color: var(--background-secondary);
  color: var(--text-primary);
  border: none;

  // Needed to fix bug with tablet support on titlebar. clicks do not register otherwise.
  -webkit-app-region: no-drag;
}

.searchbarDesktop:focus{
  outline: none;
}

.searchbarContainer{
  flex-grow:1;
  max-width: 300px !important;
  min-width: 200px !important;
}



/* All Code For Bottom Bar */

$bottom-bar-height-standard: 250px;
$bottom-bar-width-standard: 650px;



.bottomBar{
  background-color:var(--background-primary);
  transition:0.5s;
  width: $bottom-bar-width-standard;
  height: $bottom-bar-height-standard;
  top: calc(100% - $bottom-bar-height-standard);
  left: calc((100% / 2) - $bottom-bar-width-standard / 2);
  position:absolute;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow: 0px -3px 4px rgba(0, 0, 0, 0.25);

  @include lt-md{
    width: 100%;
    left: 0;
  }

  // @include lt-sm{
  //   top: 100%;
  //   height:0px;
  // }
}

.bottomBarContainer{
  padding-left:15px;
  margin-top:15px;
  height: $bottom-bar-height-standard;
}

.sortOption{
  display:flex;
  flex-direction: row;
  width:calc(100% - 20px);
  justify-content: center;
  font-weight: 300;
  font-size:24px;
  flex-grow:1;
  cursor:pointer;
  max-height:50px;
  align-items: center;
}

.optionContainer{
  display:flex;
  flex-direction: column;
  height:100%;
  margin-top:5px;
}

.optionSortButton{
  transform-origin: center;
  margin-right:20px;
  cursor: pointer;
  // transform: scale(1,-1);
}

.bookOptionsMenu{
  z-index:100;
  width: 100%;
  height: 100%;
  grid-row: 1/3;
  grid-column: 1;
  align-self: flex-end;
  background-color:rgba(0, 0, 0, 0.5);
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid black;
  @include lt-md{
    font-size:12px;

  }
}

.bookOptionsRemove{
  color:red;
  font-weight: bold;
  background-color:rgba(255,235,235,1);
  border-top: 1px solid red;
  padding: 10px 0 10px;
  text-align: center;
}

.bookOptionsInfo{
  color:#856404;
  background-color:rgba(255,243,205, 1);
  border-bottom: 1px solid goldenrod;
  padding: 10px 0 10px;
  text-align: center;
  flex-grow:1;
  font-weight: bold;
  display:flex;
  justify-content: center;
  align-items: center;
}

.bookOptionsReturn{
  font-weight: bold;
  color:whitesmoke;
  background-color:rgba(0, 0, 0, 1);
  // border: 1px solid whitesmoke;
  padding: 10px 0 10px;
  text-align: right;

  display:flex;
  justify-content: flex-end;
  
  & > *{
    // color:red;
    flex-basis: 33%;
    text-align: center;
  }
  & > div{
    display:flex;
    align-items: center;
  }
  // & > svg{
  //   // text-align: end;
    
  // }
}

.multiSelectMenuContainer{
  background-color:var(--background-primary);
  width: 100%;
  height: 30px;
  position: absolute;
  z-index: 100;
  // text-align: end;
  display:flex;
  justify-content: flex-end;
  align-items: center;
}

.multiSelectDelete{
  color:red;
  margin-right: 20px;
}

.multiSelectCircleContainer{
  color:lightgreen;
  display:flex;
  justify-content: center;
  align-items: center;
  height:100%;
  & > svg{
    width: 50px;
    height: 50px;
  }
}


.sortOffOverlay{
  position: absolute;
  top:0;
  left:0;
  width:100vw;
  height: 100vh;
}


.getStarted{
  cursor:pointer;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 10%;
  width: 80%;
  height: calc(100% - 70px);
  position: absolute;
  text-align: center;
  // border: 4px dotted var(--text-secondary);
  color: var(--text-secondary);
  > div {
    font-size:18px;
  }
  > div > svg{
    height: 40px;
    width: 40px;
    
  }
}

.placeholderBook{
  cursor: pointer;
  opacity: 0.8;
  border: 1px solid var(--text-secondary);
  display:flex;
  align-items: center;
  justify-content: center;
  > svg{
    width: 30px;
    height: 30px;
  }
}

// https://stackoverflow.com/a/30940678
// Attempt at line-clamping. Needs testing on chrome
.bookTitle{
  display: -webkit-box;
  // max-width: 400px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}


.iconButton{
  transition: 0.15s;
  color: var(--text-secondary);
  padding: 0 5px 0 5px;
  width:34px;
  &:hover{
    color: var(--text-primary);
    opacity: 0.8;
  }
  &:active{
    opacity: 0.5;
  }
}