@import url('style.css');

/* Beastiary */

#beastiary-button {
   position: fixed;
   right: 1em;
   bottom: 1em;
   z-index: 2;
}

#beastiary-button img {
   display: block;
   image-rendering: pixelated;
   object-fit: fill;
   object-position: center;
   width: 3em;
   aspect-ratio: 1;
}

#beastiary-container {
   position: fixed;
   left: 0;
   top: 0;
   width: 100vw;
   height: 100vh;
   display: flex;
   align-content: center;
   align-items: center;
   justify-content: center;
}

#beastiary {
   background-color: var(--popup-background);
   backdrop-filter: blur(5px);
   border-radius: 1em;
   padding: 1em;
   width: 20em;
   margin: 1em;
   z-index: 10;
   height: fit-content;
}

#beastiary > div:not(:last-child) {
   border-bottom-style: solid;
   border-bottom-width: 1px;
   border-bottom-color: var(--text-color);
   padding-bottom: 0.5em;
   margin-bottom: 0.5em;
}

#beastiary .stats {
   display: grid;
   column-count: 2;
   column-width: 3em auto;
}

#beastiary .stats > img {
   grid-column: 1;
   image-rendering: pixelated;
   width: 3em;
   aspect-ratio: 1;
}

#beastiary .stats > div {
   grid-column: 2;
   width: auto;
}

#beastiary .stats > :nth-of-type(1) {
   --stat-color: green;
}

#beastiary .stats > :nth-of-type(2) {
   --stat-color: orange;
}

#beastiary .stats > :nth-of-type(3) {
   --stat-color: grey;
}

#beastiary .stats > :nth-of-type(4) {
   --stat-color: red;
}

#beastiary .stats > :nth-of-type(5) {
   --stat-color: turquoise;
}

#beastiary .stats > div {
   width: 100%;
}

#beastiary .stats > div > progress {
   accent-color: var(--stat-color);
   width: 100%;
}

#beastiary .info {
   display: flex;
   align-content: center;
   justify-content: space-between;
}

#beastiary .info > div > div:last-child {
   color: grey;
}

#beastiary .controls > div:last-child {
   display: flex;
   text-align: center;
}

#beastiary .controls > div:last-child > div {
   width: 5em;
   text-align: center;
}

#beastiary .controls input[type='range'] {
   width: 100%;
}

/* Data Page */

[data-view='setup'] #sidebar,
[data-view='setup'] #player-list {
   display: none;
}

#player-list {
   position: fixed;
   width: calc(100vw - 20em);
   height: 100vh;
   top: 0;
   left: 20em;
   padding: 0;
   overflow-y: scroll;
}

#sidebar {
   position: fixed;
   top: 0;
   left: 0;
   height: 100vh;
   width: 20em;
   background-color: var(--sidebar-background);
   overflow-y: scroll;
}

#sidebar > .panel {
   background-color: var(--sidebar-panel-background);
}

#sidebar > .panel:first-child {
   background-color: var(--sidebar-header-background);
   margin-bottom: 0.5em;
   margin: 0;
   padding: 0;
   text-align: center;
   display: flex;
   border-radius: 0;
}

#sidebar > .panel {
   border-radius: 0.5em;
}

#sidebar > .panel:nth-last-child(1),
#sidebar > .panel:nth-last-child(2) {
   text-align: center;
}

#filter input[type='text'] {
   align-self: center;
   width: calc(100% - 0.6em);
}

#display-buttons,
#filter-selections {
   display: flex;
   flex-wrap: wrap;
}

table {
   width: 100%;
}

/* Player Entry */

.player {
   display: flex;
   background-color: var(--player-background);
   margin: 0.1em;
   border-radius: 1em;
   padding: 0.1em;
   vertical-align: middle;
   padding-left: 0.5em;
}

.player.filtered {
   opacity: 0.7;
}

.player[data-status='dead'] {
   opacity: 0.5;
}

.player[data-jumping='yes'] {
   background-color: var(--jump-highlight);
}

.player > * {
   align-self: center;
}

.player .reload {
   image-rendering: pixelated;
   margin-right: 0.5em;
   width: 2em;
   height: 2em;
}

.player .skin {
   margin-right: 0.5em;
}

.player .info {
   width: 12em;
   word-wrap: break-word;
}

.player[data-has-any-stats='false'] .stats div,
.player[data-has-any-stats='true'] .stats div.unknown {
   display: none;
}

.player[data-has-any-stats='false'] .stats div.unknown {
   display: block;
}

.player .stats {
   width: 6em;
}

.player .perks {
   flex-grow: 1;
}

.perk {
   color: var(--perk-color);
}

.perk .target {
   color: var(--perk-target-color);
}

.player .status {
   height: 4em;
   width: auto;
}

/* Perk Formatting */

.perk.inactive {
   color: rgb(from var(--perk-color) / 0.5);
}

.perk.negative {
   /* Negative perks should always be red */
   color: var(--perk-negative) !important;
}

.perk.no-dead {
   --perk-color: var(--perk-no-dead);
}

.perk.time {
   --perk-color: var(--perk-timed);
}

.perk.disabled {
   text-decoration-line: line-through;
}

.perk.filtered {
   opacity: 0.5;
}

.perk[target='any'],
.perk[target='boss'],
.perk[target='resistant'],
.perk[target='agile'] {
   text-shadow: var(--special-target-text);
}