:root {
  --bg: #454854;
  --box-color: #5f636f;
  --border: rgb(63, 65, 70);
  --spoiler: ;

  /* --bg: #150413;
    --box-color: #635c6d;
    --border: #ffffd1; */

  --text: #f5f5f5;
  /* --text: var(--border); */
  --text-subtle: #c0c2d0;
  --link: #abccf0;
  --accent: #808796;
  --grid-gap: 8px;
  --dangerous: #e33;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: auto;
  margin-block: calc(var(--grid-gap)*2);
  gap: calc(var(--grid-gap)*2);
  display: flex;
  flex-direction: column;
  max-width: min(1200px, calc(100vw - 40px));
}

.container {
  background: var(--box-color);
  border-radius: 5px;
  padding: 1em;
}

a,
a:visited {
  color: var(--link);
  text-decoration: 2px dashed underline;
}

banner>div {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

a.header {
  --hov-ease: cubic-bezier(.52, 0, 0, 1.13) .3s;
  width: fit-content;
  transition: transform var(--hov-ease), padding-inline var(--hov-ease);

  &:hover {
    transition: transform ease .2s, padding-inline ease .2s;
    transform: scale(1.05) rotate(1deg);
    padding-inline: .2rem;
  }

  img,
  svg {
    width: 300px;
    max-width: 70vw;
    margin: 10px;
    object-fit: contain;
  }
}

a.nav-link {
  padding: 10px;
  font-weight: bolder;
  background: var(--accent);
}

.controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

input[type="text"] {
  background: #000;
  color: #fff;
  border: 1px solid var(--border);

  &:focus {
    outline: 2px solid var(--text);
  }

  border-radius: 2px;
  padding: 5px 10px;
}

.cursor-item {
  anchor-name: --cursor;
  position: relative;
}

#main-layout {
  container-name: --main;
  container-type: inline-size;
  display: flex;
  width: 100%;
  height: fit-content;
  /* splitJS handles this */
  gap: calc(var(--grid-gap));
  border-block: 6px double var(--border);
  padding-block: var(--grid-gap);
  contain: paint;
  box-sizing: border-box;

}

/* .gutter {
    border: 1px solid var(--accent);
    border-top: none;
    border-bottom: none;
    transform: scaleY(.98);
    cursor: col-resize;
    box-sizing: border-box;
    
    &:hover, &.active {
        border-width: 2px;
    }

	.gutter-vertical {
		cursor: col-resize;
        background: red;
	}
	.gutter-horizontal {
        cursor: row-resize;
	}
} */

.cur-grid {
  /* splitJS handles this */
  flex: 2 1 0;
  display: grid;
  align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(min(30vw, 180px), 1fr));
  /* the goal is to have a grid with repeating, roughly square-ish rectangle `.slot`s */
  gap: var(--grid-gap);
}

.tray {
  --min-width: min(300px, 20vw);
  --block-gap: 10px;
  position: sticky;
  top: var(--block-gap);
  flex: 0 1 var(--min-width);
  gap: var(--grid-gap);
  flex-direction: column;

  min-width: var(--min-width);

  min-height: 200px;
  height: fit-content;
  max-height: calc(100vh - (var(--block-gap) * 4.8));

  .sortable-zone {
    display: flex;
    position: relative;
    /* background: blue; */
    /* width: 100%; */
    height: 100%;
  }

  &:has(.cursor-item) {
    #tray-content>.sortable-zone {
      display: none;
    }
  }
}

/* Hide actions be default */
.slot-actions {
  z-index: 3;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 100%;
  transform: translate(-50%);
  height: 100%;
  gap: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;

  div {
    --size: 40px;
    background: var(--bg);
    border: var(--accent) 2px solid;
    height: var(--size);
    width: var(--size);
    /* transform: scalex(.2); */
    font-weight: bolder;
    border-radius: 5px;

    display: grid;
    place-items: center;
    font-size: 1.2rem;

  }

  transition: opacity ease-out .2s .1s;
}

/* TODO: BEFORE PUSH: add ":hover" to .cursor item */
.slot .cursor-item:hover .slot-actions {
  opacity: 1;
  /* div {
    transform: scalex(1); 
    transition: transform ease-out .15s .1s;
  } */
}

.slot-actions div::after {
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
  position: absolute;
  left: calc(100% + 4px);
  background-color: var(--border);
  padding: 4px;
  border-radius: 2px;
}

.slot-actions div:hover::after {
  visibility: visible;
}

.btn-copy-handle::after {
  content: "Drag copy";
}

.btn-unassign::after {
  content: "Move to tray";
}

.btn-copy-handle,
.btn-unassign {
  user-select: none;
}

.btn-copy-handle {
  cursor: copy;
  aspect-ratio: 1;

  &:hover {
    background: var(--accent);
  }
}

.slot .cursor-item {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  margin-inline: auto;
  width: 70%;
  max-width: 200px;

  .file-name {
    width: 100%;
    border-top: 2px dashed var(--border);
  }

  .file-icon {
    height: 40px;
  }
}

.btn-unassign {
  cursor: pointer;
  aspect-ratio: 1;

  &:hover {
    background: var(--dangerous);
  }
}

#tray-content {
  flex: 1 1 0;
  height: fit-content;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  /* gap: 5px; */
}

.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  min-height: 140px;
  text-rendering: optimizeSpeed;

  transition: transform ease .2s, background ease .2s;

  .cursor-label {
    order: -1;
    flex: 0 1 auto;
  }

  .cursor-item,
  .sortable-ghost {
    order: 10;
    /* z-index: 2; */
  }

  &:has(.sortable-ghost) {
    background: var(--accent);
    transform: scale(103%);
    cursor: copy;
    border: 1.5px white dashed;

    .drag-drop {
      display: none;
    }
  }
}

.cursor-item {
  background: var(--box-color);
  border: 2px dashed var(--border);
  padding: 8px;
  margin: 5px 0;
  font-size: 0.85rem;
  pointer-events: all;

  display: flex;
  align-items: center;
  user-select: none;
  cursor: grab;

  .sortable-swap-highlight {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 2px solid var(--link);
  }

  &:active {
    cursor: grabbing;
    transform: scale(.98);
  }

  .file-icon {
    image-rendering: pixelated;
    pointer-events: none;
    vertical-align: middle;
    min-width: 1em;
    aspect-ratio: auto;

    img {
      height: 100%;
    }
  }

  .cursor-os {
    margin-left: auto;
  }
}

.unassigned-header {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin: 10px;
}

.file-name {
  width: max-content;
  height: fit-content;
  max-width: 100%;
  color: var(--text);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

#tray-content::after {
  content: "Drag and drop your cursor files in here!";
  display: flex;
  padding: 8px;
  border: 2px dashed var(--border);
  margin: 5px 0;
  font-size: 0.85rem;
  align-items: center;
  gap: 5px;

  text-align: center;
  text-wrap: balance;
  justify-content: center;
  max-width: fit-content;
  min-height: 2em;
  color: var(--text-subtle);
}

/* Handle the Hint Visibility */
#tray-content:has(.cursor-item) {
  border-color: transparent;
  /* Disable dashed border when full */
}

#tray-content:has(.cursor-item)::after {
  content: none;
  /* Remove text when full */
}

.slot:has(.cursor-item) .drag-drop {
  display: none;
  /* Hide slot hint when full */
}

.sortable-ghost {
  border-color: var(--accent);

  * {
    opacity: 0;
  }
}

.cursor-label::before {
  font-weight: bolder;
  user-select: none;
  content: attr(data-label);
}

.drag-drop::before {
  font-size: 0.8rem;
  color: var(--text-subtle);
  content: "Drag/Drop here";
}

button {
  background: var(--accent);
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-weight: bold;
}

#drop-zone-overlay {
  position: fixed;
  display: flex;
  flex-direction: column;
  inset: 0;
  /* border-radius: 20px; */
  background: #223a;
  opacity: 0;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  z-index: 100;
  pointer-events: none;
  font-weight: bold;
  transition: opacity ease .2s, backdrop-filter ease .2s;

  >* {
    margin-block: 6px;
  }

  &[visible="true"] {
    backdrop-filter: blur(8px);
    opacity: 1;
  }
}

.emote {
  height: 1.2em;
  /* Matches text height */
  width: auto;
  vertical-align: middle;
  display: inline-block;
  margin: 0 0.1em;
  outline: var(--bg) solid 0;
  border-radius: 3px;
  transition: transform ease .2s, background ease .2s, outline ease .2s;

  &:hover {
    transform: scale(1.1);
    background: var(--bg);
    outline: var(--bg) solid 4px;
  }
}

.hov-zoom {
  transition: transform ease .2s;

  &:hover {
    transform: scale(2);
    background-color: #444;
  }
}