:root {
  --拇指宽度: 16px;
  --进度条渐变-已填充: radial-gradient(
    circle farthest-corner at 10% 20%,
    rgba(255, 94, 247, 1) 12.8%,
    rgba(2, 245, 255, 1) 80.2%
  );
  --未填充颜色: gray;
  --收缩值左偏移: 50%;
  --扩张值左偏移: 50%;
  --盒子数量值左偏移: 50%;
  --行间隙值左偏移: 0%;
  --列间隙值左偏移: 0%;
  --滑块长度-盒子数量-收缩扩张: 250px;
  --滑块长度-间隙: 200px;
  --初始盒子数量: 5;
  --盒子数量比率: calc(var(--初始盒子数量) / 30 * 100%);
  --行间隙比率: 0%;
  --列间隙比率: 0%;
  --收缩比率: 100%;
  --扩张比率: 0%;
}

.弹性总区 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5vw;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.弹性-展示区 {
  width: 800px;
  height: 800px;
  position: relative;
  outline: solid 2px white;
  transition: 500ms;
}

.轴指示区 {
  position: absolute;
  --轴指示线-背景色: gray;
  opacity: 0;
  transition: 125ms;
}

.水平轴指示区 {
  width: 100%;
  bottom: 105%;
}

.垂直轴指示区 {
  height: 100%;
  right: 106%;
}

.轴指示线,
.轴指示文本 {
  position: absolute;
}

.轴指示线 {
  --边缘箭头颜色: lightblue;
}

.水平轴指示线 {
  background-image: linear-gradient(
    90deg,
    var(--轴指示线-背景色) 0%,
    var(--轴指示线-背景色) 42.5%,
    transparent 42.5%,
    transparent 57.5%,
    var(--轴指示线-背景色) 57.5%,
    var(--轴指示线-背景色) 100%
  );
  width: 100%;
  height: 1px;
  top: 50%;
  left: 0;
  translate: 0 -50%;
}

.水平轴指示线::before,
.水平轴指示线::after,
.垂直轴指示线::before,
.垂直轴指示线::after {
  color: var(--边缘箭头颜色);
}

.水平轴指示线::before {
  position: absolute;
  content: "\1438";
  top: 50%;
  left: 0;
  translate: 0 calc(-50% - 1px);
}

.水平轴指示线::after {
  position: absolute;
  content: "\1433";
  top: 50%;
  right: 0;
  translate: 0 calc(-50% - 1px);
}

.垂直轴指示线 {
  background-image: linear-gradient(
    var(--轴指示线-背景色) 0%,
    var(--轴指示线-背景色) 42.5%,
    transparent 42.5%,
    transparent 57.5%,
    var(--轴指示线-背景色) 57.5%,
    var(--轴指示线-背景色) 100%
  );
  width: 1px;
  height: 100%;
  top: 0;
  left: 50%;
  translate: -50% 0;
}

.垂直轴指示线::before {
  position: absolute;
  content: "\1431";
  top: 0;
  left: 50%;
  translate: -50% -8px;
}

.垂直轴指示线::after {
  position: absolute;
  content: "\142f";
  bottom: 0;
  left: 50%;
  translate: -50% 8px;
}

.轴指示文本 {
  font-size: calc(0.5vw + 10px);
  letter-spacing: 3px;
}

.水平轴指示文本 {
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

.垂直轴指示文本 {
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  writing-mode: vertical-lr;
}

.弹性元素 {
  position: relative;
  transition: 500ms;
  font-family: "JetBrains Mono", Consolas, monospace;
}

.弹性元素::before {
  position: absolute;
  content: attr(data-number);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 1.125rem;
}

.弹性元素::before {
  color: white;
}

.弹性-操作区 {
  position: relative;
  z-index: 1;
  width: 520px;
  outline: solid 1px gray;
}

.操作分区 {
  padding: 15px 0;
  background: linear-gradient(0deg, #111d 0%, #333d 100%);
}

.标题 {
  width: 100%;
  padding: 0 0 5px 0;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.标题中文 {
  color: rgb(83, 201, 164);
  font-size: 1.25rem;
}

.横杠 {
  margin: 0 2px;
}

[class*="代码"] {
  font-family: "JetBrains Mono", Consolas, monospace;
}

.标题代码 {
  color: rgb(207, 128, 97);
  font-size: 14px;
}

.数量与尺寸区 {
  position: relative;
  display: flex;
  padding-top: 0;
}

.数量与尺寸区 > .分割线 {
  left: 65%;
}

.盒子数量区 {
  width: 65%;
  background: none;
}

.盒子尺寸区 {
  width: 35%;
  background: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.盒子尺寸区 .布局选项 {
  gap: 20px;
}

.布局区 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.布局区,
.轴方向区 {
  width: 50%;
}

.布局与轴方向区 {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  padding: 0;
}

.分割线 {
  position: absolute;
  width: 1px;
  height: 75%;
  background-color: #fff3;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.布局选项 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

.布局按钮区 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.标签 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-right: 7px;
}

.中文 {
  font-size: 1rem;
  color: darkkhaki;
}

.代码 {
  font-size: 0.85rem;
  color: #6a863b;
}

.弹性-操作区:has(#display-flex:checked) .布局按钮区:has(input[type="radio"]) {
  filter: brightness(66%);
}

.布局按钮区:hover .中文 {
  color: goldenrod;
}

.弹性-操作区:has(#display-flex:checked)
  .布局按钮区:has(input[type="radio"]:checked) {
  filter: brightness(100%);
}

.弹性-操作区:has(#display-flex:checked)
  .布局按钮区:has(input[type="radio"]:checked)
  .中文 {
  color: #dace5c;
}

.布局按钮区:hover .代码 {
  color: yellowgreen;
}

.弹性-操作区:has(#display-flex:checked)
  .布局按钮区:has(input[type="radio"]:checked)
  .代码 {
  color: lightgreen;
}

label:hover,
input:hover {
  -webkit-user-select: none;
  user-select: none;
}

input[type="radio"],
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border: solid 1px #888;
  display: flex;
  justify-content: center;
  align-items: center;
}

.布局按钮区:hover input[type="radio"]:checked,
.布局按钮区:hover input[type="checkbox"]:checked {
  background-color: #395a43;
  outline: solid 1px #aaa;
}

.布局按钮区:hover :where(input[type="radio"], input[type="checkbox"]) {
  border-color: white;
}

input[type="radio"]::after,
input[type="checkbox"]::after {
  width: 70%;
  height: 70%;
  content: "";
  background-color: white;
  clip-path: polygon(12% 50%, 43% 75%, 90% 5%, 100% 12%, 47% 95%, 5% 61%);
  opacity: 0;
  pointer-events: none;
  transform: translate(-5%, 5%);
  transition: 25ms;
}

input[type="radio"]:checked,
input[type="checkbox"]:checked {
  border: solid 1px #fff3;
  /*background-color: #527752;*/
  background-color: #3d6666;
}

input[type="radio"]:checked::after,
input[type="checkbox"]:checked::after {
  opacity: 1;
}

.标签:hover,
input:hover {
  cursor: url("/Images/Common/鼠标-指向.cur"), pointer;
}

.主轴方向选项 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

input[type="range"] {
  position: relative;
  width: var(--滑块长度-盒子数量-收缩扩张);
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  border-radius: 10px;
}

#box-count {
  background-image: linear-gradient(
    90deg,
    rgba(255, 94, 247, 1) 0%,
    rgba(2, 245, 255, 1) var(--盒子数量比率),
    var(--未填充颜色) var(--盒子数量比率)
  );
}

#x-gap {
  background-image: linear-gradient(
    90deg,
    rgba(255, 94, 247, 1) 0%,
    rgba(2, 245, 255, 1) var(--行间隙比率),
    var(--未填充颜色) var(--行间隙比率)
  );
}

#y-gap {
  background-image: linear-gradient(
    90deg,
    rgba(255, 94, 247, 1) 0%,
    rgba(2, 245, 255, 1) var(--列间隙比率),
    var(--未填充颜色) var(--列间隙比率)
  );
}

#flex-shrink {
  background-image: linear-gradient(
    90deg,
    rgba(255, 94, 247, 1) 0%,
    rgba(2, 245, 255, 1) var(--收缩比率),
    var(--未填充颜色) var(--收缩比率)
  );
}

#flex-grow {
  background-image: linear-gradient(
    90deg,
    rgba(255, 94, 247, 1) 0%,
    rgba(2, 245, 255, 1) var(--扩张比率),
    var(--未填充颜色) var(--扩张比率)
  );
}

input[type="range"]::-moz-range-thumb {
  position: relative;
  z-index: 1;
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50px;
  background: linear-gradient(145deg, #146864 0%, #0f935c 100%);
  transform: translateY(-10%) scale(2);
  filter: drop-shadow(0 0 2px rgb(39, 39, 39));
  border: none;
}

input[type="range"]::-webkit-slider-thumb {
  position: relative;
  z-index: 1;
  -webkit-appearance: none;
  appearance: none;
  width: var(--拇指宽度);
  aspect-ratio: 1;
  border-radius: 50px;
  background: linear-gradient(145deg, #146864 0%, #0f935c 100%);
  transform: translateY(-40%) scale(2);
  filter: drop-shadow(0 0 2px rgb(39, 39, 39));
}

input[type="range"] + .滑块数据文本 {
  position: absolute;
  z-index: 2;
  width: calc(var(--拇指宽度) * 2);
  aspect-ratio: 1;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  color: rgb(201, 241, 255);
  translate: -50% -35%;
  pointer-events: none;
  font-family: "Jetbrains Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  font-size: 0.75em;
}

#box-count + .滑块数据文本 {
  left: var(--盒子数量值左偏移);
}

#x-gap + .滑块数据文本 {
  left: var(--行间隙值左偏移);
}

#y-gap + .滑块数据文本 {
  left: var(--列间隙值左偏移);
}

#flex-shrink + .滑块数据文本 {
  left: var(--收缩值左偏移);
}

#flex-grow + .滑块数据文本 {
  left: var(--扩张值左偏移);
}

.换行与间隙区 {
  padding: 10px 0;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.换行区,
.间隙区 {
  width: 50%;
  height: 100%;
  background: none;
}

label[for="flex-wrap"] {
  align-items: flex-end;
}

.换行选项 {
  display: flex;
  justify-content: center;
  gap: 40px;
}

.换行中文 {
  text-align: right;
}

.间隙区 {
  padding: 5px 0;
}

.间隙标题 {
  margin: 0 0 20px 0;
}

.行间隙按钮区,
.列间隙按钮区 {
  display: flex;
  flex-direction: column;
}

.行间隙按钮区 {
  margin: 0 0 15px 0;
}

.行间隙按钮区 input[type="range"],
.列间隙按钮区 input[type="range"] {
  width: var(--滑块长度-间隙);
}

.行间隙按钮区 datalist,
.列间隙按钮区 datalist {
  transform: translateY(80%);
  width: 100%;
}

option {
  font-family: "JetBrains Mono", Consolas, monospace;
}

.行间隙按钮区 datalist option,
.列间隙按钮区 datalist option {
  width: auto;
}

.行间隙按钮区 label,
.列间隙按钮区 label {
  transform: translateY(-25%);
  padding: 0;
  margin-top: 5px;
}

.尺寸区 {
  padding: 10px 0;
}

.尺寸分区 {
  padding: 10px 0 0 0;
}

input[type="range"]::after {
  position: absolute;
  z-index: 2;
  width: calc(var(--拇指宽度) * 2);
  aspect-ratio: 1;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  top: -110%;
  color: rgb(201, 241, 255);
  transform: translateX(-50%);
  pointer-events: none;
}

input[type="range"]::-webkit-slider-thumb:hover {
  cursor: url("/Images/Common/鼠标-横向缩放.png"), ew-resize;
}

.盒子数量按钮区,
.收缩按钮区,
.扩张按钮区 {
  flex-direction: column;
  /*height: 75px;*/
  margin-top: 10px;
  align-items: center;
}

.滑块区 {
  position: relative;
  height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

datalist {
  transform: translateY(80%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  color: gray;
}

option {
  width: 15px;
  text-align: center;
  font-size: 0.75rem;
}

.盒子数量按钮区 label,
.尺寸分区 label {
  transform: translateY(-25%);
}

.轴分布区 {
  padding: 0;
}

.轴分布三区 {
  position: relative;
}

.轴分布分区 {
  padding: 10px 0 20px 0;
  display: flex;
  flex-direction: column;
}

.轴分布类型 {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: center;
}

.轴分布分区 .标题 {
  padding-bottom: 15px;
}

.轴分布类型按钮 {
  width: calc(100% / 3);
  height: 100%;
  font-size: 1rem;
  outline: none;
  background: linear-gradient(90deg, rgb(29, 29, 29) 0%, rgb(45, 45, 45) 100%);
  color: white;
  border-bottom: solid 1px transparent;
  transition: border-bottom-color 100ms;
}

.轴分布类型按钮:not(.当前按钮):hover {
  border-bottom: solid 1px palevioletred;
}

.轴分布选项 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 5px;
  flex-grow: 1;
}

.轴分布选项 .布局按钮区 {
  padding: 0 10px;
}

.交叉轴单行分布区 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
}

.交叉轴多行分布区 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
}

:is(.主轴分布区, .交叉轴单行分布区, .交叉轴多行分布区) label {
  padding-right: 5px;
}

.轴分布-入 {
  animation: 轴分布切换动画-入 0.25s ease-out;
}

.轴分布-出 {
  animation: 轴分布切换动画-出 0.25s ease-out;
}

@keyframes 轴分布切换动画-入 {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100px);
  }
}

@keyframes 轴分布切换动画-出 {
  from {
    transform: translateX(100px);
  }
  to {
    transform: translateX(0);
  }
}

@media screen and (height < 1080px) {
  .弹性总区 {
    align-items: flex-start;
  }
}

@media screen and (height < 1000px) {
  .弹性-操作区 {
    /*height: 850px;*/
  }

  .操作分区 {
    padding: 5px 0;
  }

  .间隙区 {
    padding: 0;
  }

  .盒子数量按钮区,
  .收缩按钮区,
  .扩张按钮区 {
    height: 65px;
  }

  .尺寸分区 {
    padding: 5px 0 0 0;
  }

  .标题中文 {
    font-size: 1rem;
  }

  .标题代码 {
    font-size: 0.9rem;
  }

  .中文 {
    font-size: 0.85rem;
  }

  .代码 {
    font-size: 0.75rem;
  }
}