.cell {
  border-radius: 1rem;
  position: relative;

  width: var(--cell-min-dimensions);
  height: var(--cell-min-dimensions);

  box-shadow: 0 0rem 0.75rem rgba(0, 0, 0, 0.15);

  > .resize-area {
    position: absolute;
    bottom: 0rem;
    right: 0rem;
    z-index: 10;

    height: min(6rem, 25%);
    aspect-ratio: 1 / 1;

    border-bottom: 0.25rem solid var(--accent-color);
    border-right: 0.25rem solid var(--accent-color);

    border-bottom-right-radius: inherit;

    opacity: 0;
  }

  &:active {
    opacity: 0.8;
    transition: opacity 0.2s ease;
  }

  &:hover {
    cursor: grab;
    border: 0.1rem solid var(--accent-color);
    transition: border-color 0.2s ease;
  }
}

.cell:hover .resize-area {
  opacity: 1;
  cursor: se-resize;
  transition: opacity 0.2s ease;
}

.cell:active .resize-area {
  opacity: 0;
}