@charset "utf-8";

:root {
  --color-tier0: #ccc;
  --color-tier1: hsl(0 70% 70%);
  --color-tier2: hsl(30 70% 70%);
  --color-tier3: hsl(60 70% 70%);
  --color-tier4: hsl(90 70% 70%);
  --color-tier5: hsl(120 70% 70%);
  --color-tier6: hsl(150 70% 70%);
  --color-tier7: hsl(180 70% 70%);
  --color-tier8: hsl(210 70% 70%);
  --color-tier9: hsl(240 70% 70%);
  --color-tier10: hsl(270 70% 70%);
  --color-tier11: hsl(300 70% 70%);
  --color-tier12: hsl(330 70% 70%);
  --color-bg: #1f1f1f;
  --font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

img {
  display: block;
}

ul {
  list-style: none;
  padding: 0;
}

aside {
  text-align: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  cursor: pointer;

  &:disabled {
    cursor: auto;
  }
}

.file-label,
.radio-label,
.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  border: 1px solid #2a2b2c;
  color: #8c8c8c;
  font-family: Arial;
  font-size: 13.3333px;
  padding: 0 6px;
  border-radius: 2px;
  vertical-align: bottom;
  user-select: none;
  cursor: pointer;

  &:has(:disabled) {
    cursor: auto;
    border-color: #222;
    color: #333;
  }

  @media (hover: hover) {
    &:not(:has(:disabled)):hover {
      filter: brightness(1.1);
    }
  }

  input {
    display: none;
  }
}

.radio-label,
.checkbox-label {
  &:has(:not(:disabled):checked) {
    border-color: #317593;
    background: #1d2c33;
    color: #ededed;
  }

  &:has(:disabled:checked) {
    background: #222;
  }
}

.select {
  height: 32px;
  cursor: pointer;

  &:disabled {
    cursor: auto;
  }
}