@charset "utf-8";

:root {
  --tier0-color: #ccc;
  --tier1-color: hsl(0 70% 70%);
  --tier2-color: hsl(30 70% 70%);
  --tier3-color: hsl(60 70% 70%);
  --tier4-color: hsl(120 70% 70%);
  --tier5-color: hsl(180 70% 70%);
  --tier6-color: hsl(240 70% 70%);
  --font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  height: 100%;
}

body {
  user-select: none;
  height: 100%;
  overflow-x: hidden;
  background: #1f1f1f;
  color: #ccc;
  display: flex;
  flex-direction: column;
  font-family: var(--font-family);
}

body[data-state="1"] {
  .edit-container {
    display: none;
  }

  .edit-row-container {
    display: block;
  }

  .card-image {
    opacity: 0.1;
    pointer-events: none;
  }

  .tier-item:not(.active) {
    .label-outer {
      opacity: 0.1;
    }
  }

  .book {
    pointer-events: none;
  }
}

body[data-state="3"] {
  .tier {
    pointer-events: none;
  }
}

body[data-state="4"] {
  .edit-container {
    display: none;
  }

  .edit-preview-container {
    display: block;
  }

  main {
    display: block;

    .canvas {
      display: block;
      max-width: 100%;
    }

    .tier-list {
      display: none;
    }

    .book {
      display: none;
    }
  }
}

header {
  flex-shrink: 0;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 48px;

  button {
    height: 32px;
  }

  select {
    height: 32px;
    padding: 0 4px;
  }

  .edit-row-container {
    display: none;

    .tier-color-select {
      &[data-value="0"] {
        background: var(--tier0-color);
      }

      &[data-value="1"] {
        background: var(--tier1-color);
      }

      &[data-value="2"] {
        background: var(--tier2-color);
      }

      &[data-value="3"] {
        background: var(--tier3-color);
      }

      &[data-value="4"] {
        background: var(--tier4-color);
      }

      &[data-value="5"] {
        background: var(--tier5-color);
      }

      &[data-value="6"] {
        background: var(--tier6-color);
      }

      option {
        &[value="0"] {
          background: var(--tier0-color);
        }

        &[value="1"] {
          background: var(--tier1-color);
        }

        &[value="2"] {
          background: var(--tier2-color);
        }

        &[value="3"] {
          background: var(--tier3-color);
        }

        &[value="4"] {
          background: var(--tier4-color);
        }

        &[value="5"] {
          background: var(--tier5-color);
        }

        &[value="6"] {
          background: var(--tier6-color);
        }
      }
    }
  }

  .edit-preview-container {
    display: none;
  }
}

main {
  flex: 1;
  flex-shrink: 0;
  padding: 0 8px 8px;
  display: flex;
  flex-direction: column;
}

.canvas {
  display: none;
}

.card-image {
  cursor: pointer;

  &.dragging {
    opacity: 0.1;
  }
}

.tier-list {
  flex-shrink: 0;
  border: 1px solid #181818;
  background: #1b1b1b;

  .tier-item {
    +.tier-item {
      border-top: 1px solid #181818;
    }

    &[data-color-index="0"] .label-outer {
      background: var(--tier0-color);
    }

    &[data-color-index="1"] .label-outer {
      background: var(--tier1-color);
    }

    &[data-color-index="2"] .label-outer {
      background: var(--tier2-color);
    }

    &[data-color-index="3"] .label-outer {
      background: var(--tier3-color);
    }

    &[data-color-index="4"] .label-outer {
      background: var(--tier4-color);
    }

    &[data-color-index="5"] .label-outer {
      background: var(--tier5-color);
    }

    &[data-color-index="6"] .label-outer {
      background: var(--tier6-color);
    }

    &.active {
      .tier-item-inner {
        outline-offset: 1px;
        outline: 2px solid #fff;
      }
    }

    .tier-item-inner {
      display: flex;
    }

    .label-outer {
      display: flex;
      align-items: center;
      width: 81px;
      border-right: 1px solid #181818;

      .label {
        width: 100%;
        text-align: center;
        color: #2f2f2f;
        cursor: pointer;
      }
    }

    .board {
      flex: 1;
      display: grid;
      align-content: start;
      grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
      min-height: 53px;
      cursor: pointer;

      >img {
        width: 100%;
      }
    }
  }
}

.book {
  flex: 1;
  flex-shrink: 0;
  margin-top: 8px;
  display: grid;
  align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  min-height: 106px;

  >img {
    width: 100%;

    &.hidden {
      display: none;
    }
  }
}

footer {
  display: none;
  flex-shrink: 0;
  text-align: center;
  line-height: 32px;
  background: #1b1b1b;
  color: #8f8f8f;

  small {
    font-size: 13px;
  }
}