@charset "utf-8";

header {
  .container {
    .size-radio-label-container {
      margin-left: auto;
    }
  }
}

.drag-canvas {
  position: fixed;
  aspect-ratio: var(--aspect-ratio);
  pointer-events: none;
  opacity: 0.5;
  z-index: 20;

  &.hidden {
    display: none;
  }
}

.main-section {
  .btn-container {
    .checkbox-label.toggle {
      width: 32px;
      justify-content: center;

      [type="checkbox"] {
        &:not(:checked)~.bi:first-of-type {
          display: none;
        }

        &:checked~.bi:last-of-type {
          display: none;
        }
      }
    }

    .color {
      width: 32px;
      height: 32px;
      cursor: pointer;

      &:disabled {
        cursor: auto;
      }
    }
  }

  .canvas-container-outer {
    border: 1px solid #181818;
    margin-top: 4px;

    .canvas-container {
      display: grid;
      background: #1b1b1b;

      &:empty {
        &::before {
          content: '';
          aspect-ratio: var(--aspect-ratio);
          pointer-events: none;
        }
      }

      canvas {
        display: block;
        width: 100%;
        cursor: grab;

        &.dragging {
          opacity: 0.3;
        }
      }
    }
  }
}

body {
  &[data-size-idx="-2"] {
    .canvas-container {
      grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    }
  }

  &[data-size-idx="-1"] {
    .canvas-container {
      grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    }
  }

  &[data-size-idx="0"] {
    .canvas-container {
      grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }
  }

  &[data-size-idx="1"] {
    .canvas-container {
      grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    }
  }

  &[data-size-idx="2"] {
    .canvas-container {
      grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    }
  }
}

@media (width < 720px) {
  body {
    &[data-size-idx="-2"] {
      .canvas-container {
        grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
      }
    }

    &[data-size-idx="-1"] {
      .canvas-container {
        grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
      }
    }

    &[data-size-idx="0"] {
      .canvas-container {
        grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
      }
    }

    &[data-size-idx="1"] {
      .canvas-container {
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
      }
    }

    &[data-size-idx="2"] {
      .canvas-container {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
      }
    }
  }
}