/*
 * This is the stylesheet for the tool. It includes: 
 * styles for skills, sections, buttons etc.
 * 
 * @author: Plueschgiraffe
 * @date: 27.08.2021 
 */

/* -------------------------- global variables -------------------------- */
:root {
   /* sizes */
   --actual-skill-width: 424px;
   --actual-skill-height: 124px;
   --actual-mini-skill-width: 212px;
   --actual-side-width: 486.5px;
   --actual-head-height: 110px;
   --general-margin: 20px;
   /* colors */
   --background-gray: rgb(25, 25, 25);
   --build-grid-gray: rgb(40, 40, 40);
   --overbox-gray: rgb(25, 30, 35);
   --skill-gray: rgb(45, 45, 45);
   --border-gray: rgb(180, 180, 180);
   --button-red: rgb(215, 45, 80);
   --rare-blue: rgb(50, 115, 205);
   --epic-purple: rgb(150, 55, 190);
   --heroric-red: rgb(220, 60, 55);
   --legendary-orange: rgb(255, 170, 60);
   --duo-green: rgb(165, 255, 170);
   --hammer-white: rgb(235, 235, 180);
   --neg-red: rgb(215, 5, 30);
   --pos-green: rgb(135, 225, 135);
   --info-yellow: rgb(255, 235, 120);
   /* other */
   --smaller-grid-factor: 0.8;
}

/* -------------------------- basic page style -------------------------- */
body {
   background-color: var(--background-gray);
   background-position-y: 110px;
   background-size: 35px 35px;
   background-image: linear-gradient(
         to right,
         var(--build-grid-gray) 1px,
         transparent 1px
      ),
      linear-gradient(to bottom, var(--build-grid-gray) 1px, transparent 1px);
   font-family: 'Alegreya Sans';
   font-size: 16px;
   font-weight: 400;
   color: white;
   margin: 0px;
}

/* -------------------------- scrollbar style -------------------------- */
::-webkit-scrollbar {
   width: 0px;
   height: 0px;
}

.scrollable::-webkit-scrollbar {
   width: 12px;
}

.scrollable::-webkit-scrollbar-track {
   background: rgb(60, 60, 60);
}

.scrollable::-webkit-scrollbar-thumb {
   background: rgb(110, 110, 110);
}

.scrollable::-webkit-scrollbar-thumb:hover {
   background: var(--button-red);
}

/* -------------------------- overlay and overbox style -------------------------- */
#overlay {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 50;
   background: rgba(140, 140, 140, 0.35);
   transition: all 300ms ease;
   opacity: 0;
   pointer-events: none;
}

#overlay.active {
   opacity: 1;
   pointer-events: all;
}

#overbox {
   position: fixed;
   top: calc(50% + calc(0.5 * var(--actual-head-height)));
   left: calc(50% - calc(0.5 * var(--actual-side-width)));
   z-index: 60;
   background: var(--overbox-gray);
   border: 2px solid var(--border-gray);
   border-radius: 15px;
   transition: all 250ms ease-in-out;
   transform: translate(-50%, -50%) scale(0);
   pointer-events: none;
}

#overbox.active {
   transform: translate(-50%, -50%) scale(1);
   pointer-events: all;
}

#overbox .head {
   position: relative;
   border-bottom: 2px solid var(--border-gray);
   padding: 5px;
   padding-inline: 15px;
}

#overbox .head .title {
   font-size: 40px;
}

#overbox .body {
   padding: 15px;
   padding-inline: 0px;
}

#overbox .filter-table {
   display: grid;
   grid-template-columns: repeat(5, 160px);
}

#overbox .filter-table .column {
   padding-inline: 20px;
}

#overbox .filter-table .column:not(.last-column) {
   border-right: 1px solid var(--border-gray);
}

#overbox .column .title {
   font-size: 22px;
   font-weight: 500;
   color: var(--info-yellow);
   margin-bottom: 5px;
}

#overbox .divider {
   border: none;
   border-top: 1px solid var(--border-gray);
}

#overbox .deleter {
   position: absolute;
   top: 50%;
   right: 10px;
   font-size: 60px;
   line-height: 30px;
   transform: translateY(-58%);
   opacity: 0.5;
}

#overbox .deleter:not(.wait-for-drag):hover {
   opacity: 1;
}

#overbox input[type='checkbox'] {
   cursor: pointer;
}

#overbox label {
   font-size: 20px;
   cursor: pointer;
}

/* -------------------------- body style -------------------------- */
#body {
   position: fixed;
   width: 100%;
   height: calc(100vh - var(--actual-head-height));
}

#body.scrollable {
   overflow: scroll;
}

#body.smaller {
   width: calc(100% - calc(var(--actual-side-width) + 2px));
}

#body .error {
   width: 550px;
   position: absolute;
   left: 50%;
   top: calc(50% - calc(0.5 * var(--actual-head-height)));
   font-size: 35px;
   color: white;
   line-height: 60px;
   text-align: center;
   border: 3px solid var(--button-red);
   border-radius: 20px;
   transform: translate(-50%, -50%);
   padding: 15px;
}

#body .title:not(.skill .title, .section .title) {
   font-size: 45px;
   margin-left: calc(3 * var(--general-margin));
   margin-top: 35px;
}

#body .skill-grid:not(.section .skill-grid) {
   gap: 25px;
   margin-inline: calc(3 * var(--general-margin));
   margin-top: var(--general-margin);
   margin-bottom: calc(2 * var(--general-margin));
}

/* -------------------------- head style -------------------------- */
#head {
   height: calc(var(--actual-head-height) - 32px);
   position: sticky;
   top: 0px;
   z-index: 20;
   background: var(--overbox-gray);
   border-bottom: 2px solid var(--border-gray);
   box-shadow: 0 0 4px var(--border-gray);
   padding: 15px;
   padding-inline: 20px;
}

#head .title {
   min-width: 50px;
   font-size: 60px;
   margin-right: 20px;
}

#head .search {
   width: 180px;
   position: relative;
   top: -10px;
   background: rgb(40, 45, 50);
   border: 2.5px solid var(--border-gray);
   border-radius: 50px;
   outline: none;
   color: white;
   font-family: 'Alegreya Sans';
   font-weight: 400;
   font-size: 20px;
   margin-right: 20px;
   padding: 15px;
   padding-inline: 20px;
}

#head .search::placeholder {
   color: white;
   opacity: 0.85;
}

#head p {
   display: inline-block;
}

#head button {
   position: relative;
   top: -10px;
   font-size: 20px;
   margin-right: 20px;
   padding: 15px;
   padding-inline: 20px;
}

/* -------------------------- info style -------------------------- */
#info p:not(.title, .skill p, .mini-skill p, .segment-title, .sub-title) {
   width: 355px;
   font-size: 20px;
   font-weight: 300;
   margin: 0px;
   margin-left: 45px;
   margin-top: 10px;
}

/* -------------------------- side style -------------------------- */
#side {
   position: fixed;
   top: 0px;
   right: 0px;
   z-index: 30;
   width: var(--actual-side-width);
   height: 100%;
   background: var(--overbox-gray);
   border-left: 2px solid var(--border-gray);
   box-shadow: 0 0 4px var(--border-gray);
   user-select: none;
}

#side.smooth {
   transition: all 300ms ease;
}

#side.hidden {
   width: 0px;
   border: none;
}

#side .title:not(.skill .title, .mini-skill .title) {
   width: calc(calc(var(--actual-side-width) * 0.95) - 40px);
   font-size: 42px;
   text-align: center;
   margin: 0px;
   margin-inline: 12.165px;
   overflow: hidden;
}

#side .title:not(.skill .title, .mini-skill .title):before,
#side .title:not(.skill .title, .mini-skill .title):after {
   width: 60%;
   display: inline-block;
   vertical-align: middle;
   margin: 0 0.5em 0 -55%;
   border-bottom: 2px solid white;
   content: '';
}

#side .title:not(.skill .title, .mini-skill .title):after {
   margin: 0 -55% 0 0.5em;
}

#side .segment {
   height: calc(100% - 30px);
   position: relative;
   padding: 20px;
   padding-top: 10px;
   overflow: scroll;
}

#side .segment-title {
   width: 355px;
   color: var(--info-yellow);
   font-family: 'Alegreya Sans SC';
   font-size: 27px;
   font-weight: 400;
   margin: 0px;
   margin-top: 20px;
   margin-left: 30px;
}

#side .resize-container {
   height: 50%;
   min-height: 15%;
   max-height: 85%;
   position: relative;
   border-bottom: 2px solid var(--border-gray);
}

#side .resizer {
   width: 100%;
   height: 15px;
   position: absolute;
   left: 0px;
   bottom: 0px;
   background: linear-gradient();
   cursor: n-resize;
}

#side .skill-grid {
   margin: 0px;
   padding: 11.25px;
}

#side .mini-skill-grid {
   width: 446.5px;
   margin-top: 10px;
   padding: 5px;
}

/* -------------------------- section style -------------------------- */
.section {
   position: absolute;
   background: var(--background-gray);
   border: 2px solid var(--border-gray);
   border-radius: 10px;
   user-select: none;
}

.section.on-top {
   z-index: 15;
}

.section .title:not(.skill .title) {
   position: absolute;
   left: 50px;
   top: -22px;
   z-index: 10;
   max-width: 80%;
   background: var(--background-gray);
   font-size: 35px;
   padding-inline: 10px;
   padding-bottom: 5px;
}

.section .title.wait-for-drag {
   cursor: move;
}

.section .mover {
   position: absolute;
   left: -15px;
   right: 40px;
   top: -20px;
   height: 45px;
}

.section .mover:not(.wait-for-drag) {
   cursor: grab;
}

.section.moving {
   cursor: grabbing;
}

.section.moving .mover {
   cursor: grabbing;
}

.section .resizer {
   width: 20px;
   height: 20px;
   position: absolute;
   right: -10px;
   bottom: -10px;
}

.section .resizer:not(.wait-for-drag) {
   cursor: se-resize;
}

.section .deleter {
   width: 20px;
   position: absolute;
   right: 8px;
   top: 7px;
   opacity: 0.25;
}

/* -------------------------- skill grid style -------------------------- */
.skill-grid-container {
   height: 100%;
   overflow: hidden;
}

.skill-grid {
   min-height: var(--actual-skill-height);
   min-width: var(--actual-skill-width);
   margin: 20px;
   margin-top: 40px;
   display: grid;
   grid-template-columns: repeat(auto-fill, var(--actual-skill-width));
   grid-gap: 20px;
}

.mini-skill-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, 212px);
   grid-gap: 12.5px;
}

/* -------------------------- skill style -------------------------- */

.skill {
   width: 400px;
   height: 100px;
   position: relative;
   background-color: var(--skill-gray);
   border: 2px solid var(--border-gray);
   border-radius: 10px;
   padding: 10px;
   font-weight: 300;
   transition: all 125ms ease-in-out;
   user-select: none;
}

.skill:hover:not(.dragging, .wait-for-drag) {
   transform: scale(1.04);
}

.skill.dragging {
   opacity: 0.3;
}

.skill.info {
   margin-inline: 11.25px;
   margin-top: 20px;
}

.skill .icon {
   width: 100px;
   height: 100px;
   float: left;
   margin-right: 20px;
}

.skill .tag {
   width: 25px;
   height: 25px;
   position: absolute;
   right: 10px;
   top: 10px;
   margin-left: 10px;
}

.skill .tag.left-tag {
   right: 40px;
}

.skill .title {
   font-size: 20px;
   margin-top: 0px;
   margin-bottom: 10px;
}

.skill .text {
   margin-top: 0px;
   margin-bottom: 5px;
}

.skill .effect {
   margin-top: 0px;
   margin-bottom: 10px;
}

.skill .rank,
.skill .price {
   position: absolute;
   top: 13px;
   right: 45px;
   font-weight: 500;
   color: var(--info-yellow);
   margin: 0px;
}

.skill .deleter {
   width: 20px;
   position: absolute;
   left: 8px;
   top: 8px;
   opacity: 0.4;
   font-weight: 400;
}

/* -------------------------- mini skill style -------------------------- */
.mini-skill {
   width: 200px;
   height: 50px;
   position: relative;
   background-color: var(--skill-gray);
   border: 1px solid var(--border-gray);
   border-radius: 5px;
   padding: 5px;
   font-size: 8px;
   font-weight: 300;
   transition: all 125ms ease-in-out;
   cursor: pointer;
   user-select: none;
}

.mini-skill:hover:not(.dragging, .wait-for-drag) {
   transform: scale(1.04);
}

.mini-skill .icon {
   width: 50px;
   height: 50px;
   float: left;
   margin-right: 10px;
}

.mini-skill .tag {
   width: 12.5px;
   height: 12.5px;
   position: absolute;
   right: 5px;
   top: 5px;
   margin-left: 5px;
}

.mini-skill .tag.left-tag {
   right: 20px;
}

.mini-skill .title {
   font-size: 10px;
   margin-top: 0px;
   margin-bottom: 5px;
}

.mini-skill .text {
   margin-top: 0px;
   margin-bottom: 2.5px;
}

.mini-skill .effect {
   margin-top: 0px;
   margin-bottom: 5px;
}

.mini-skill .rank,
.mini-skill .price {
   position: absolute;
   top: 7px;
   right: 22.5px;
   font-weight: 500;
   color: var(--info-yellow);
   font-family: 'Alegreya Sans';
   margin: 0px;
}

/* -------------------------- skill rarities -------------------------- */

.skill.rare {
   border-color: var(--rare-blue);
   box-shadow: 0 0 6px var(--rare-blue);
}

.skill.rare .title {
   color: var(--rare-blue);
   text-shadow: 0 0 6px var(--rare-blue);
}

.skill.epic {
   border-color: var(--epic-purple);
   box-shadow: 0 0 8px var(--epic-purple);
}

.skill.epic .title {
   color: var(--epic-purple);
   text-shadow: 0 0 8px var(--epic-purple);
}

.skill.heroric {
   border-color: var(--heroric-red);
   box-shadow: 0 0 10px var(--heroric-red);
}

.skill.heroric .title {
   color: var(--heroric-red);
   text-shadow: 0 0 10px var(--heroric-red);
}

.skill.legendary {
   border-color: var(--legendary-orange);
   box-shadow: 0 0 10px var(--legendary-orange);
}

.skill.legendary .title {
   color: var(--legendary-orange);
   text-shadow: 0 0 8px var(--legendary-orange);
}

.skill.duo {
   border-color: var(--duo-green);
   box-shadow: 0 0 8px var(--duo-green);
}

.skill.duo .title {
   color: var(--duo-green);
   text-shadow: 0 0 10px var(--duo-green);
}

.skill.hammer {
   border-color: var(--hammer-white);
   box-shadow: 0 0 8px var(--hammer-white);
}

.skill.hammer .title {
   color: var(--hammer-white);
   text-shadow: 0 0 8px var(--hammer-white);
}

/* -------------------------- title style -------------------------- */
.title {
   background: none;
   border: none;
   font-family: 'Alegreya Sans SC';
   font-weight: 400;
   color: white;
   margin: 0px;
}

.title:focus {
   outline: none;
}

/* -------------------------- effect tags -------------------------- */

bold {
   font-weight: 500;
}

pos {
   color: var(--pos-green);
   font-weight: 500;
}

neg {
   color: var(--neg-red);
   font-weight: 500;
}

.effect pos,
.effect neg {
   margin-left: 25px;
}

/* -------------------------- button style -------------------------- */
button {
   background: none;
   font-family: 'Alegreya Sans';
   font-weight: 500;
   color: white;
   border: 2.5px solid var(--button-red);
   border-radius: 50px;
   cursor: pointer;
   transition: all 100ms ease-in-out;
}

button:hover {
   background-color: var(--button-red);
   transform: scale(1.05);
}

button:active {
   transform: scale(1);
}

/* -------------------------- deleter style -------------------------- */
.deleter {
   font-size: 40px;
   line-height: 15px;
   color: var(--button-red);
}

.deleter:not(.wait-for-drag) {
   cursor: pointer;
}

.deleter:not(.wait-for-drag):hover {
   opacity: 1;
}